当突出显示时在textarea上显示边框和句柄
我已经动态创建了嵌套在动态创建的divs中的textareas。该divs draggabnle和textareas可调整大小使用jQuery。当突出显示时在textarea上显示边框和句柄
我想要边框和任何paticular div/textarea的拖动/调整大小的句柄,只有当用户点击那个paticular textarea时才会出现。我假设我需要使用与可拖动的相同的onclick事件,但我没有使得手柄和边框显示的js知识。
任何帮助非常感谢
这里是我的代码
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<style>
body{background-color:#ccc;}
.dragbox{width:10px; height:10px;padding: 0.0em; margin:25px; border:0;cursor:move; z-index:2}
.textarea1{ width: 300px; height: 300px; padding: 0.5em; z-index:3}
#handle{
display: block;
height: 16px;
width: 100px;
background-color: red;
position: absolute;
top:-15px;
left:0px;
font-size:10px;
}
#content
{
position:absolute;
top:150px;
left:0px;
margin:auto;
z-index:1;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src = "http://js.nicedit.com/nicEdit-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
var i=0;
var p=25;
}
function editor1(idf) {
//var body = document.body;
// The magic
document.getElementById(idf).addEventListener ("dblclick", function (event) {
var target = event.target;
if (target.nodeName === "TEXTAREA") {
var area = new nicEditor ({fullPanel : true}).panelInstance (target);
area.addEvent ("blur", function() {
this.removeInstance (target);
});
}
}, false);
};
function NewTextArea(id)
{
id=id+i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate',i);
newdiv.style.position = "relative";
newdiv.style.top = p;
newdiv.style.left = p;
newdiv.style.cursor='move';
newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id='"+i +"' onDblClick='editor1("+i+")' name='textarea["+i +"]' class='textarea1' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='"+i+"' name='id["+i+"]'><br><input name='box_type["+i+"]' type='hidden' value='text'/>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";
newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";
document.getElementById("frmMain").appendChild(newdiv);
$(function()
{
$("#"+i).resizable(
{
stop: function(event, ui)
{
var width = ui.size.width;
var height = ui.size.height;
// alert("width="+width+"height="+height);
ValProportions(width,height,ui.element.context.id);
}
});
$("#"+id).draggable(
{
stop: function(event, ui)
{
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
// alert("left="+Stoppos.left+"top="+Stoppos.top);
ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate'));
}
});
$("#"+i).draggable({handle:"#handle"});
});
function ValProportions(defaultwidth, defaultheight,id) {
$('#width'+id).val(defaultwidth);
$('#height'+id).val(defaultheight);
}
function ValPostion(defaultleft,defaulttop,id) {
$('#left'+id).val(defaultleft);
$('#top'+id).val(defaulttop);
}
i++;
p=p+25;
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div5.php" method="post">
<input id="btn1" type="button" value="Add New textbox" onClick="NewTextArea('draggable');"/>
<input type="submit" value="Save Page" >
</form>
</body>
</html>
如果我理解正确的问题,这可以用CSS来实现:
textarea { resize:none; border:none; }
textarea:focus { resize:both; border:1px solid #000; }
嗨,这与textarea边界的工作,但它不能与div工作,因为div是一个叫.dragbox的类该句柄是另一个叫做#handle的CSS元素。任何想法 – 2013-03-14 11:25:38
我正在寻找添加onclick attrribute到动态div,然后将可视化的句柄更改为可见,但我的js不是那么强大,我不知道正确的语法newdiv.onclick = document.getElementById('handle' ).style.visibility = “可见”;并将可见性设置为隐藏在#handle的css声明中我的js有什么问题? – 2013-03-14 11:29:39
我无法提供帮助我很害怕,我没有使用您使用的任何插件来允许分隔符的大小可调,并且这不是默认的HTML。你可以使用jQuery的'click'函数:'$('div')。click(function(){/ *代码检查是否存在调整大小的句柄*/if(resizeHandles === true){$(this ).css('border','1px solid#000');/*在这里添加调整大小句柄的代码* /} else {/ * if语句的反面* /}})' – 2013-03-14 11:53:48
刚才向我们展示我们需要查看的代码,只是HTML,CSS和JS。 (MySQL选择不帮我什么,因为我没有得到数据库) – caramba 2013-03-14 11:05:51
我已经删除了PHP的MySQL代码,任何想法?欢呼 – 2013-03-14 11:07:40