前段时间有个客户说要做个像bbc一样可以
拖拽布局和编辑功能的网站。公司就让我做了个Demo,基本实现了这些功能。 新闻中心窗口可以编辑,不过数据是静态的,还没加Ajax。 目前只在IE6 和FF2.0下测试过,其他浏览器还不知道。
事件格式化函数.书上的代码。
//
JavaScript Document
//
事件格式化函数,摘自JavaScript高级程序一书 p258
var
EventUtil
=
new
Object;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
EventUtil.addEventHandler
=
function
(oTarget, sEventType, fnHandler)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( oTarget.addEventListener)
{
oTarget.addEventListener(sEventType, fnHandler, false);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if( oTarget.attachEvent )
{
oTarget.attachEvent("on" + sEventType, fnHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
oTarget["on" + sEventType] = fnHandler;
}
}
;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
EventUtil.removeEventHandler
=
function
(oTarget, sEventType, fnHandler)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( oTarget.removeEventListener)
{
oTarget.removeEventListener(sEventType, fnHandler, false);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if( oTarget.detachEvent )
{
oTarget.detachEvent("on" + sEventType, fnHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
oTarget["on" + sEventType] = null;
}
}
;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
EventUtil.formatEvent
=
function
(oEvent)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(document.all)
{
oEvent.charCode = ( oEvent.type == "keypress" ) ? oEvent.keyCode : 0;
oEvent.eventPhase = 2;
oEvent.isChar = ( oEvent.charCode > 0 );
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
oEvent.preventDefault = function()
{
this.returnValue = false;
};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( oEvent.type == "mouseout" )
{
oEvent.relatedTarget = oEvent.toElement;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if( oEvent.type == "mouseover" )
{
oEvent.relatedTarget = oEvent.fromElement;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
oEvent.stopPropagation = function()
{
this.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
}
;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
EventUtil.getEvent
=
function
()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( window.event )
{
return this.formatEvent(window.event);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
return EventUtil.getEvent.caller.arguments[0];
}
}
;
页面代码
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>
Drag Drop Demo
</
title
>
<
script
type
="text/javascript"
src
="js/eventutil.js"
></
script
>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
style
type
="text/css"
>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
html, body{
}{
font-size:12px; margin:0px; padding:0px; color:#333333;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a{
}{color:#555; text-decoration:none;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a:hover{
}{color:#FFaa00;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.page{
}{width:1000px; border:0px solid #F8F8F8;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.header{
}{width:100%;border:1px solid #008000; height:40px; text-align:center; margin-bottom:20px;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.footer{
}{width:100%;border:1px solid #008000; height:40px; text-align:center; clear:both;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.content{
}{width:920px; border:0px solid #009000; height:500px; margin:auto;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#dragHelper{
}{border:1px dashed #FF0000;position:relative; display:none;
filter:alpha(opacity=40); -moz-opacity:0.4;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.left{
}{ width:600px; float:left;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.left .focus{
}{
width:600px; border:1px solid #004578; height:100px;
float:left; overflow:auto; margin-bottom:10px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.left .container1{
}{
width:290px; border:0px solid #004578;
height:auto; min-height:100px; float:left;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.left .container2{
}{
width:290px; border:0px solid #004578;
height:auto; min-height:100px; float:right;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.content .container3{
}{
width:290px; border:0px solid #000090;
height:auto; min-height:100px; float:right;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.box {
}{
position:relative; width:100%; height:116px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwin{
}{
border:1px solid #76c2eb;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwinDrag{
}{
border:1px dashed #76c2eb; height:100px;
filter: alpha(opacity=50); -moz-opacity:0.5;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwin .title{
}{
background:#d4eeff;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#d4eeff,endcolorstr=#fcfdff,gradientType=0);
height:26px;
border-bottom:1px solid #76c2eb;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwin .title .text{
}{
float:left; width:80%; cursor:move; height:100%;
line-height:25px; padding-left:10px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwin .title .button{
}{
width:15%; float:right; cursor:pointer;
line-height:25px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwin .editor{
}{
display:none; width:100%; background:#EEEEEE;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.fwwin .body{
}{
background:#F8F8F8; height:62px;
padding:5px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.box .message{
}{
display:none; width:100%;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.box .message table{
}{
border:0px solid #DEDEDE;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.box .space{
}{
height:15px;
}
</
style
>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
type
="text/javascript"
>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Rect()
{
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Rect.prototype =
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getObjPos : function(e)
{
this.top=e.offsetTop;
this.left=e.offsetLeft;
this.width=e.offsetWidth;
this.height=e.offsetHeight;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
while(e=e.offsetParent)
{
this.top += e.offsetTop;
this.left += e.offsetLeft;
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
isInRect : function(x, y, obj)
{
this.getObjPos(obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(x < this.left || x > this.left+this.width || y < this.top || y > this.top+this.height)
{
return 0;
}else if(y - this.top > this.height /2){
return 1;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
return 2;
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
toString : function()
{
var str = "{ left : " + this.left + ",";
str += "top : " + this.top + ",";
str += "width : " + this.width + ",";
str += "height : " + this.height + "}";
return str;
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var dragObj =
{};
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var editObj =
{};
var rect = new Rect();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function debug(str)
{
$("debug").innerHTML += str + "<br>";
$("debug").scrollTop += 50;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function initObject()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
String.prototype.inc=function(s)
{return this.indexOf(s)>-1?true:false};
var agent=navigator.userAgent ;
window.isOpr=agent.inc("Opera") ;
window.isIE=agent.inc("IE")&&!isOpr ;
window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE ;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.$=function(obj)
{return typeof(obj)=="string"?document.getElementById(obj):obj} ;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.oDel=function(obj)
{if($(obj)!=null && $(obj).parentNode)
{$(obj).parentNode.removeChild($(obj))}} ;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.getElementsByClassName = function(className, parentElement)
{
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (i=0; j=elems[i]; i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1)
{
result.push(j);
}
}
return result;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function initEvent()
{
var content, tmpObj;
dragObj.wndCount = 0;
dragObj.wnds = new Array();
content = $("content").getElementsByTagName("div");
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<content.length; i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(content[i].className == "text")
{
content[i].onmousedown = onMouseDown;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(content[i].className == "button")
{
content[i].onclick = onClick;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(content[i].className == "box")
{
dragObj.wnds.push(content[i]);
dragObj.wndCount++;
}
}
//container
dragObj.cons = new Array();
dragObj.cons[0] = $("con1");
dragObj.cons[1] = $("con2");
dragObj.cons[2] = $("con3");
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(isIE)
{
for(i=0; i<3; i++)
dragObj.cons[i].style.height = "100px";
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function initDragObject()
{
dragObj.isMouseDown = false;
dragObj.o = null;
dragObj.gh = $("dragHelper");
dragObj.x = 0;
dragObj.y = 0;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function initEditObject()
{
editObj.isShow = false;
editObj.o = null;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function startDrag()
{
dragObj.gh.style.width = dragObj.o.offsetWidth - 2 + "px";
dragObj.gh.style.height = dragObj.o.offsetHeight - 2 + "px";
dragObj.gh.realheight = dragObj.o.offsetHeight;
dragObj.gh.style.display = "block";
dragObj.o.parentNode.insertBefore(dragObj.gh, dragObj.o);
rect.getObjPos(dragObj.o);
dragObj.o.style.position = "absolute";
dragObj.o.style.left = rect.left + 2 + "px";
dragObj.o.style.top = rect.top - rect.height + 2 + "px";
dragObj.o.style.width = rect.width + "px";
dragObj.o.style.height = rect.height + "px";
document.body.appendChild(dragObj.o);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function onMouseDown(e)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!dragObj.isMouseDown)
{
e = EventUtil.getEvent(e);
dragObj.isMouseDown = true;
dragObj.o = e.target.parentNode.parentNode.parentNode;
dragObj.o.style.filter = "alpha(opacity=50)";
dragObj.o.style.MozOpacity = 0.5;
startDrag();
dragObj.x = e.pageX;
dragObj.y = e.pageY;
//
//debug("onMouseDown:" + dragObj.o.id)
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function onMouseMove(e)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(dragObj.isMouseDown && dragObj.o)
{
e = EventUtil.getEvent(e);
var left, top, wid, hei;
wid = e.pageX - dragObj.x;
hei = e.pageY - dragObj.y;
left = parseInt(dragObj.o.style.left) + wid;
top = parseInt(dragObj.o.style.top) + hei;
dragObj.o.style.left = left + "px";
dragObj.o.style.top = top + "px";
dragObj.x = e.pageX;
dragObj.y = e.pageY;
//
var tmp = null, obj;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i< dragObj.wndCount; i++)
{
obj = dragObj.wnds[i];
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(dragObj.o == obj)
{
continue;
}
ret = rect.isInRect(dragObj.x, dragObj.y, obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(ret == 1)
{ //down
tmp = obj.nextSibling;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(tmp == null)
{
obj.parentNode.appendChild(dragObj.gh);
//
//debug("onMouseMove: ->down ->appendchild ->" + obj.id);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(tmp != dragObj.gh && tmp.parentNode == obj.parentNode)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
obj.parentNode.insertBefore(dragObj.gh, tmp);
//
//debug("onMouseMove: ->down ->insertBefore ->" + tmp.id);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{}
}
return;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(ret == 2)
{ //up
tmp = dragObj.gh.nextSibling;
if(tmp == obj) return;
obj.parentNode.insertBefore(dragObj.gh, obj);
//
//debug("onMouseMove: ->up ->insertBefore ->" + obj.id );//+ "-tmpid" + tmp.id);
return;
}
}
//con
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<dragObj.cons.length; i++)
{
obj = dragObj.cons[i];
ret = rect.isInRect(dragObj.x, dragObj.y, obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(ret > 0 && dragObj.gh.parentNode != obj)
{
wins = getElementsByClassName("box", obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(wins.length == 0)
{
obj.appendChild(dragObj.gh);
//
//debug("onMouseMove: ->down ->container.appendchild ->" + obj.id);
return;
}
}
}// end for
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function onMouseUp(e)
{
dragObj.isMouseDown = false;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(dragObj.o)
{
dragObj.o.style.cssText = "";
dragObj.o.className = "box";
dragObj.o.style.height = dragObj.gh.realheight + "px";
dragObj.gh.parentNode.insertBefore(dragObj.o, dragObj.gh);
dragObj.o = null;
}
oDel(dragObj.gh);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function onClick(e)
{
var obj, btn, edit;
e = EventUtil.getEvent(e);
btn = e.target;
obj = btn.parentNode.parentNode.parentNode;
edits = getElementsByClassName("editor", obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(edits.length >=1 )
{
showEditor(edits[0]);
resetPara(edits[0]);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*if(obj.id != "win22"){
oDel(obj);
return;
}*/
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.onload = function()
{
initObject();
initEvent();
initDragObject();
initEditObject();
};
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
</
script
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
type
="text/javascript"
>
//height
var nMax, nStart, oMove;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function move()
{
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function addHeight(edit, hei)
{
var obj = edit.parentNode.parentNode;
edit.style.display = "block";
hei = edit.offsetHeight;
wid = edit.offsetWidth;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!isIE)
{
tmp = obj.offsetHeight + hei;
obj.style.height = tmp + "px";
}
edit.style.height = hei + "px";
edit.style.width = wid + "px";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function subHeight(edit)
{
var obj = edit.parentNode.parentNode;
hei = edit.offsetHeight
hei2 = edit.clientHeight;
if(hei2>hei) hei = hei2;
edit.style.display = "none";
//debug("sub:" + edit.id + "-" + hei);
tmp = obj.offsetHeight - hei ;
obj.style.height = tmp + "px";
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(arguments[1] && edit.parentNode.childNodes.length == 1)
{
edit.parentNode.style.display = "none";
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function showEditor(edit)
{
var obj = edit.parentNode.parentNode;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(edit.isShow)
{ //close
edit.isShow = false;
subHeight(edit)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{ //show
edit.isShow = true;
addHeight(edit);
//save parameters
edit.prevPara = getPara(edit);
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function getPara(obj)
{
var chks, para;
chks = obj.getElementsByTagName("input");
para = "";
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<chks.length; i++)
{
if(chks[i].checked)
para += "|" + chks[i].value;
else
para += "| ";
}
return para.substr(1);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function setPara(obj, paras)
{
var chks, para;
para = paras.split("|");
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(para.length > 0)
{
chks = obj.getElementsByTagName("input");
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<chks.length; i++)
{
if(para[i] == " ")
chks[i].checked = false;
else
chks[i].checked = true;
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function resetPara(obj)
{
setPara(obj, obj.prevPara);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function doChange(objEdit, option, n)
{
var objAdd = $(objEdit.id.replace("edit", "add"));
var objDoID = objAdd.id + n;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!option.checked)
{ //del
objDo = $(objDoID);
subHeight(objDo, true)
oDel(objDo);
return;
}
//get data
var data = ["测试新闻1","测试新闻2","测试新闻3"];
var url = ["http://www.baidu.com", "http://www.google.cn", "http://www.smarta.cn"];
objDo = document.createElement("div");
objDo.setAttribute("id", objDoID);
title = option.getAttribute("title")
html ="<table width='100%' cellspacing='1' cellpadding='3' border='0' style='background:#FFFFFF'>";
html+="<tr><td style='height:20px; background:#DEDEDE; font-weight:bold; padding-left:5px'>" + title + "</td></tr>";
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<data.length; i++)
{
html += "<tr><td style='background:#F8F8F8;'><a href='" + url[i] + "' target='_blank'>" + (i+1) + ". " + data[i] + "</a></td></tr>";
}
html += "</table>";;
objDo.innerHTML = html;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
objAdd.style.display = "block";
objAdd.appendChild(objDo);
addHeight(objDo);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function doAction(action, sObj)
{
var obj = $(sObj);
showEditor(obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(action == "save")
{
obj.currentPara = getPara(obj);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(obj.currentPara != obj.prevPara)
{ //
cp = obj.currentPara.split("|");
pp = obj.prevPara.split("|");
chks = obj.getElementsByTagName("input");
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<cp.length; i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(cp[i] != pp[i])
{
doChange(obj, chks[i], i);
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
resetPara(obj);
}
}
</
script
>
</
head
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
body
>
<
div
class
="page"
>
<
div
class
="header"
>
Header
</
div
>
<
div
class
="content"
id
="content"
>
<
div
class
="left"
>
<
div
class
="focus"
id
="debug"
></
div
>
<
div
class
="container1"
id
="con1"
>
<
div
class
="box"
id
="win11"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
window 11
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
>
选项
<
br
/>
1.
<
br
/>
2.
</
div
>
<
div
class
="body"
>
b
</
div
>
</
div
>
<
div
class
="message"
>
</
div
>
<
div
class
="space"
></
div
>
</
div
>
<
div
class
="box"
id
="win12"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
window 12
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
>
选项
<
br
/>
1.
<
br
/>
2.
</
div
>
<
div
class
="body"
>
b
</
div
>
</
div
>
<
div
class
="message"
>
</
div
>
<
div
class
="space"
></
div
>
</
div
>
</
div
>
<
div
class
="container2"
id
="con2"
>
<
div
class
="box"
id
="win21"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
window 21
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
>
选项
<
br
/>
1.
<
br
/>
2.
</
div
>
<
div
class
="body"
>
b
</
div
>
</
div
>
<
div
class
="message"
>
</
div
>
<
div
class
="space"
></
div
>
</
div
>
<
div
class
="box"
id
="winNews"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
新闻中心
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
id
="editNews"
>
<
table
width
="100%"
border
="0"
cellspacing
="0"
cellpadding
="0"
>
<
tr
><
td
colspan
="2"
height
="6"
></
td
></
tr
>
<
tr
><
td
>
<
input
type
="checkbox"
name
="chkNews"
id
="chkNews1"
value
="1"
title
="公司新闻"
/><
label
for
="chkNews1"
>
公司新闻
</
label
>
</
td
><
td
>
<
input
type
="checkbox"
name
="chkNews"
id
="chkNews2"
value
="2"
title
="行业新闻"
/><
label
for
="chkNews2"
>
行业新闻
</
label
>
</
td
></
tr
>
<
tr
><
td
colspan
="2"
style
="border-bottom:1px dashed #CCC; height:6px;font-size:6px;"
>
</
td
></
tr
>
<
tr
><
td
colspan
="2"
height
="10"
></
td
></
tr
>
<
tr
><
td
colspan
="2"
align
="right"
valign
="middle"
>
<
a
href
="javascript:doAction('save', 'editNews');void(0);"
>
[保存]
</
a
>
<
a
href
="javascript:doAction('cancel', 'editNews');void(0);"
>
[取消]
</
a
>
</
td
></
tr
>
<
tr
><
td
colspan
="2"
style
="border-bottom:1px dashed #CCC; height:6px;font-size:6px;"
>
</
td
></
tr
>
</
table
>
</
div
>
<
div
class
="body"
>
推荐新闻
</
div
>
</
div
>
<
div
class
="message"
id
="addNews"
>
</
div
>
<
div
class
="space"
></
div
>
</
div
>
<
div
class
="box"
id
="win23"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
window 23
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
>
选项
<
br
/>
1.
<
br
/>
2.
选项
<
br
/>
1.
<
br
/>
2.
选项
<
br
/>
1.
<
br
/>
2.
选项
<
br
/>
1.
<
br
/>
2.
</
div
>
<
div
class
="body"
>
b
</
div
>
</
div
>
<
div
class
="message"
>
</
div
>
<
div
class
="space"
></
div
>
</
div
>
</
div
>
</
div
>
<
div
class
="container3"
id
="con3"
>
<
div
class
="box"
id
="win31"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
window 31
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
>
选项
<
br
/>
1.
<
br
/>
2.
</
div
>
<
div
class
="body"
>
b
</
div
>
</
div
>
<
div
class
="message"
>
</
div
>
<
div
class
="space"
>
</
div
>
</
div
>
<
div
class
="box"
id
="win32"
>
<
div
class
="fwwin"
>
<
div
class
="title"
>
<
div
class
="text"
>
window 32
</
div
>
<
div
class
="button"
>
[编辑]
</
div
>
</
div
>
<
div
class
="editor"
>
选项
<
br
/>
1.
<
br
/>
2.
</
div
>
<
div
class
="body"
>
b
</
div
>
</
div
>
<
div
class
="message"
>
</
div
>
<
div
class
="space"
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
="footer"
>
Footer
</
div
>
<
div
id
="dragHelper"
>
</
div
>
</
div
>
</
body
>
</
html
>