二、功能要求[图解]
界面:
三、功能
全文代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>
uuwish.com之模板管理
</title></head>
<body >
<div>
<table width="100%" border="1" style="border-collapse:collapse;">
<tr>
<td style="width:200px; padding:2px;" valign="top" align="center">
<select size="4" name="ctl00$MainPage$LayoutControl1$LbxItem" id="ctl00_MainPage_LayoutControl1_LbxItem" οndblclick="Layer.addLayer();" οnclick="Layer.checkAddRemoveButton();" style="height:450px;width:200px;">
</select></td>
<td style="width:60px; padding-top:20px;"valign="top" align="center">
<br />
<input name="ctl00$MainPage$LayoutControl1$BtnAdd" type="button" id="ctl00_MainPage_LayoutControl1_BtnAdd" value="添加" οnclick="Layer.addLayer();" /><br />
<input name="ctl00$MainPage$LayoutControl1$BtnRemove" type="button" id="ctl00_MainPage_LayoutControl1_BtnRemove" value="移除" οnclick="Layer.removeDiv();" /></td>
<td style="padding:2px;">
<!--内容 -->
<div id="ctl00_MainPage_LayoutControl1_DivContent" style="border-color:#58CB64;border-width:1px;border-style:solid;height:450px;width:100%;overflow-y:scroll; padding:1px;">
</div>
<!--内容给束 -->
<!--方向控制 -->
<div style="width:100%; text-align:center;">
<table width="180px;">
<tr>
<td align="center" colspan="2"><input id="BtnUp" type="button" value="向上" οnclick="Layer.moveUp();" /></td>
</tr>
<tr>
<td align="left"><input id="BtnLeft" type="button" value="向左" οnclick="Layer.moveLeft()" /></td>
<td align="right"><input id="BtnRight" type="button" value="向右" οnclick="Layer.moveRight();" /></td>
</tr>
<tr>
<td align="center" colspan="2"><input id="BtnBottom" type="button" value="向下" οnclick="Layer.moveBottom();" /></td>
</tr>
</table>
</div>
<input type="hidden" name="ctl00$MainPage$LayoutControl1$HFInfo" id="ctl00_MainPage_LayoutControl1_HFInfo" />
<input type="hidden" name="ctl00$MainPage$LayoutControl1$HFSource" id="ctl00_MainPage_LayoutControl1_HFSource" />
<!--方向控制结束 -->
</td>
</tr>
</table>
<input type="button" value="提交内容" οnclick="alert(document.getElementById('ctl00_MainPage_LayoutControl1_HFInfo').value)" />
</div>
<style type="text/css">
body { font-size:12px; }
.divstyle { border:1px solid #58CB64;float:left; width:45%; height:100px;margin:2px}
.divleftstyle { border:1px solid #58CB64;float:left; width:50%; height:100px;margin:2px}
.divrightstyle { border:1px solid #58CB64;float:right; width:49%; height:100px;margin:2px}
.titlecolor { width:100%; background-color:#DDF1D8; height:25px; }
.selectdiv { border:1px solid #64B7D7;float:left; width:45%; height:100px;margin:2px;filter:alpha(opacity=30); }
.selecttitle { width:100%; background-color:#DEEEF4; height:25px; }
.fontt{padding-top:4px;padding-left:12px;font-weight:bold;}
.bai{width:100%;position:relative;zoom:1}
.bga{position:relative;margin-bottom:12px;border:1px solid #9BC9DF;background:#DBEDF5}
.bgb{position:relative;margin-bottom:12px;border:1px solid #CFEBC5;background:#E6F8E2}
.bgc{position:relative;margin-bottom:12px;border:1px solid #A8BEE7;background:#D8DFEC}
.bgd{position:relative;margin-bottom:12px;border:1px solid #A5DA94;background:#DBF1D4}
.bge{position:relative;margin-bottom:12px;border:1px solid #DBF1D4;background:#DBF1D4}
.bgf{position:relative;margin-bottom:12px;border:1px solid #D4BAB8;background:#ECECEC}
.bgg{position:relative;margin-bottom:12px;border:1px solid #E5ADA7;background:#FED6D2}
.bgh{position:relative;margin-bottom:12px;border:1px solid #E3D686;background:#F2EAB7}
.dat_list_none { display:none;}
.bgacolor{background:#DBEDF5}
.bgbcolor{background:#E6F8E2}
.bgccolor{background:#D8DFEC}
.bgdcolor{background:#DBF1D4}
.bgecolor{background:#DBF1D4}
.bgfcolor{background:#ECECEC}
.bggcolor{background:#FED6D2}
.bghcolor{background:#F2EAB7}
.bc{padding:5px 5px 5px 8px;margin:0 3px 3px;background:#FFF}
.rg1,.rg2,.rg3,.rg4,.rga1,.rga2,.rga3,.rga4,.rgb1,.rgb2,.rgb3,.rgb4,.rgc1,.rgc2,.rgc3,.rgc4,.rgd1,.rgd2,.rgd3,.rgd4,.rge1,.rge2,.rge3,.rge4,.rgf1,.rgf2,.rgf3,.rgf4,.rgg1,.rgg2,.rgg3,.rgg4,.rgh1,.rgh2,.rgh3,.rgh4{background-image:url(/images/corner.gif);background-repeat:no-repeat;overflow:hidden;position:absolute;font-size:1px;}
.rga1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 0px;}
.rga2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -0px;}
.rga3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -3px;}
.rga4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -3px;}
.rgb1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -10px;}
.rgb2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -10px;}
.rgb3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -13px;}
.rgb4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -13px;}
.rgc1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -20px;}
.rgc2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -20px;}
.rgc3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -23px;}
.rgc4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -23px;}
.rgd1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -30px;}
.rgd2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -30px;}
.rgd3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -33px;}
.rgd4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -33px;}
.rge1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -40px;}
.rge2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -40px;}
.rge3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -43px;}
.rge4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -43px;}
.rgf1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -50px;}
.rgf2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -50px;}
.rgf3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -53px;}
.rgf4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -53px;}
.rgg1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -60px;}
.rgg2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -60px;}
.rgg3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -63px;}
.rgg4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -63px;}
.rgh1{width:3px;height:3px;top:-1px;left:-1px;background-position:0 -70px;}
.rgh2{height:3px; width:3px;top:-1px;right:-1px !important;right:-2px;background-position:-11px -70px;}
.rgh3{bottom:-1px;left:-1px;height:7px;width:7px;background-position:0 -73px;}
.rgh4{height:7px;width:7px;bottom:-1px;right:-1px !important;right:-2px;background-position:-7px -73px;}
.TableStyle { width:100%;border-collapse:collapse;empty-cells:show;border-color:#64B7D7 }
.HeadStyle { font-weight:bold;background-color:#DEEEF4;font-size:14px; }
.ItemStyle { font-size:12px; }
.FootSytle { font-weight:bold;background-color:#F6F0E4;font-size:12px; }
.tac { text-align:center; }
.divstyle { border:1px solid #58CB64;float:left; width:45%; height:100px;margin:2px}
.divleftstyle { border:1px solid #58CB64;float:left; width:50%; height:100px;margin:2px}
.divrightstyle { border:1px solid #58CB64;float:right; width:49%; height:100px;margin:2px}
.titlecolor { width:100%; background-color:#DDF1D8; height:25px; }
.selectdiv { border:1px solid #64B7D7;float:left; width:45%; height:100px;margin:2px;filter:alpha(opacity=30); }
.selecttitle { width:100%; background-color:#DEEEF4; height:25px; }
.templateleft { left: 0px; top: 0px; margin:0px;padding:0px; margin-bottom:2px;width:97%;float:left; }
.templateright { left: 0px; top: 0px; margin:0px;padding:0px; margin-bottom:2px;width:100%;float:right; }
.loading{ display:inline;width:20px;margin-left:1px;font-size:12px;font-family:serif;overflow:hidden;padding-left:1px;color:red;}
</style>
<script type="text/javascript">
var list = new Array(); //存储层信息
var itemName = "ctl00_MainPage_LayoutControl1_LbxItem"; //列表名称
var divName = "ctl00_MainPage_LayoutControl1_DivContent" //层显示名称.
var btnAddID = "ctl00_MainPage_LayoutControl1_BtnAdd";
var btnRemoveID = "ctl00_MainPage_LayoutControl1_BtnRemove";
var divLabel = document.getElementById("ctl00_MainPage_LayoutControl1_DivContent");
var divOption = document.getElementById("ctl00_MainPage_LayoutControl1_LbxItem");
var textInput = document.getElementById("ctl00_MainPage_LayoutControl1_HFInfo");
var itemInput = document.getElementById("ctl00_MainPage_LayoutControl1_HFSource");
var btnUpButtonID = "btnUp"
var btnLeftButtonID = "BtnLeft"
var btnRightButtonID = "BtnRight"
var btnBottomButtonID = "BtnBottom"
var divInfo = '<div class="divstyle" οndblclick="Layer.removeDiv()" οnclick="Layer.checkLayer({num})" id="div{num}"><div class="titlecolor" id="title{num}"><table width=100%><tr><td>{name}</td><td align=right><div style=border:1px solid #f0f0f0><a href=javascript:void(0) οnclick=Layer.deleteLayer({num})>×</a></div></td></tr></table></div> </div>';
var divFinallyInfoLeft = '<div class="bga bai templateleft"><div class="rga1"></div><div class="rga2"></div><div style="height:20px;" class="bgacolor fontt"><table style="width:100%;margin:0px;padding:0px;" border="0" cellpadding="0" cellspacing="0"><tr style="font-weight:bold"><td align=left>{name}</td><td align=right style="padding-right:5px;"><a href="javascript:void(0)" ><img src=/images/template/up.png οnclick=NarrowTemplate(this,"content{id}") /></a></td></tr></table></div><div id=content{id} style="display:block"><div class="bc" style="margin-top:3px;padding:3px" id={label} runat=server></div></div><div class="rga3"></div><div class="rga4"></div></div>';
var divFinallyInfoRight = '<div class="bga bai templateright"><div class="rga1"></div><div class="rga2"></div><div style="height:20px;" class="bgacolor fontt"><table style="width:100%;margin:0px;padding:0px;" border="0" cellpadding="0" cellspacing="0"><tr style="font-weight:bold"><td align=left>{name}</td><td align=right style="padding-right:5px;"><a href="javascript:void(0)" ><img src=/images/template/up.png οnclick=NarrowTemplate(this,"content{id}") /></a></td></tr></table></div><div id=content{id} style="display:block"><div class="bc" style="margin-top:3px;padding:3px" id={label} runat=server></div></div><div class="rga3"></div><div class="rga4"></div></div>';
var layerIndex = 0;
var layerModel = function(id,name,checked,state,label,index){
this.id = id;
this.name = name;
this.checked = checked;
this.state = state; //0代表正常 ，1代表删除
this.index = index;
this.label = label;
this.addLayer = function(){
Layer.addItem(this.id);
}
}
var Layer = {
addLayer : function(){
var idValue = divOption.options[divOption.selectedIndex].value;
if(idValue!=""){
Layer.getItem(idValue).index = layerIndex + 1;
Layer.addItem(idValue);
Layer.selectLayer(idValue);
} else {
alert("请选择项目进行添加！");
divOption.focus();
}
},
exists : function(id){
for(var i=0;i<list.length;i++){
if(list[i].id == id ){
return true;
}
}
return false;
},
addItem : function(id){
var item = System.gid(itemName);
var model = Layer.getItem(id);
var currentLayerIndex = Layer.lookArrayIndex(id);//当前的层索引
if(model!=null){
model.state=0;
var contentInfo = divLabel.innerHTML;
var layerInfo = divInfo;
layerInfo = divInfo.Replace("{num}",model.id.toString()).Replace("{index}",model.index).Replace("{name}",model.name);
divLabel.innerHTML = contentInfo + layerInfo;
if(model.checked){ Layer.styleInfo(model.id); }//选中
}
},
deleteItem : function(id){
for(var i=0;i<list.length;i++){
if(list[i].id == id ){
list[i].state=1;//删除
return true;
}
}
return false;
},
getItem : function(id){
for(var i=0;i<list.length;i++){
if(list[i].id == id )
return list[i];
}
return null
},
getItemByIndex : function(index){
for(var i=0;i<list.length;i++){
if(list[i].index == index)
return list[i];
}
return null
},
getItemByChecked : function(){
for(var i=0;i<list.length;i++){
if(list[i].checked && list[i].state==0)
return list[i];
}
return null
},
styleInfo : function(id){
var idStr = "div" + id.toString();
var titleID = "title" + id.toString();
var idObject = System.gid(idStr);
var titleObject = System.gid(titleID);
var model = Layer.getItem(id)
if(model!=null){
idObject.className = "selectdiv";
titleObject.className = "selecttitle";
model.checked = true;
}
},
checkLayer : function(id){
Layer.freshLayerStyle();
Layer.styleInfo(id);
Layer.checkAddRemoveButton();
Layer.checkDirectionButton(true)
Layer.checkText();
},
selectLayer : function(id){
Layer.freshLayerInfo();
Layer.styleInfo(id);
Layer.checkListItem();
Layer.checkAddRemoveButton();
Layer.checkDirectionButton(true)
Layer.checkText();
},
deleteLayer : function(id){
var model = Layer.getItem(id);
if(model!=null){
var isDelete=Layer.deleteItem(model.id);
divLabel.removeChild(System.gid("div"+model.id.toString())); //移除图层
model.state=1;
model.index =0;
} else {
alert("请选中图层后再删除");
}
Layer.systemDeal();
},
removeDiv : function(){
var model = Layer.getItemByChecked();
if(model!=null){
var isDelete=Layer.deleteItem(model.id);
divLabel.removeChild(System.gid("div"+model.id.toString())); //移除图层
model.state=1;
model.index =0;
} else {
alert("请选中图层后再删除");
}
Layer.systemDeal();
},
checkListItem : function(){
for(i=divOption.length-1;i>=0;i--){
divOption.options[i]=null;
}
list.sort(function(a,b){return a.index-b.index;});
for(var i=0;i<list.length;i++){
var model=list[i];
if(model.state==1){
var optionItem = document.createElement("option");
divOption.options.add(optionItem);
optionItem.innerHTML = model.name;
optionItem.value = model.id;
}
}
},
checkAddRemoveButton : function(){
var itemSelect = System.gid(itemName);
var addBtn = System.gid(btnAddID);
var removeBtn = System.gid(btnRemoveID);
var blnRemoveState = false;
var blnAddState = false;
for(var i=0;i<list.length;i++){
var model=list[i];
if(model.checked && model.state==0) { blnRemoveState=true;break; }
}
for(var m=0;m<list.length;m++){
var model1=list[m];
if(itemSelect.value!="" && model1.state==0) { blnAddState=true;break; }
}
removeBtn.disabled = (blnRemoveState ? "" : "disabled");
addBtn.disabled = (blnAddState ? "" : "disabled");
},
checkDirectionButton : function(blnExpress){
var btnUp = System.gid(btnUpButtonID);
var btnLeft = System.gid(btnLeftButtonID);
var btnRight = System.gid(btnRightButtonID);
var btnBottom = System.gid(btnBottomButtonID);
btnUp.disabled = "disabled";
btnLeft.disabled = "disabled";
btnRight.disabled = "disabled";
btnBottom.disabled = "disabled";
if(blnExpress){
var leftIndex =rightIndex = topIndex = bottomIndex = -1;
var model = Layer.getItemByChecked();
if(model != null){
var index = model.index;
if((index % 2) == 0){
leftIndex = index - 1;
topIndex = index - 2;
bottomIndex = index + 2;
} else {
rightIndex = index + 1;
topIndex = index - 2;
bottomIndex = index + 2;
}
if(leftIndex>0 && leftIndex<=layerIndex) { btnLeft.disabled = ""; }
if(rightIndex>0 && rightIndex<=layerIndex) { btnRight.disabled = ""; }
if(topIndex>0 && topIndex<=layerIndex) { btnUp.disabled = ""; }
if(bottomIndex>0 && bottomIndex<=layerIndex) { btnBottom.disabled = ""; }
}
}//控制操作
},
lookArrayIndex : function(id){
for(var i=0;i<list.length;i++){
var model=list[i];
if(model.id==id && model.state==0){
layerIndex += 1;
model.index = layerIndex;
break;
}
}
return layerIndex;
},
freshLayerInfo : function(){
if(divLabel.innerHTML.length>0) { divLabel.innerHTML = ""; }
layerIndex = 0;
list.sort(function(a,b){return a.index-b.index;});
for(var i=0;i<list.length;i++){
var model = list[i];
if(model.state==0){ //记录为右边显示的记录
model.addLayer();
}
}
Layer.freshLayerStyle();
},
freshLayerStyle : function(){
for(var i=0;i<list.length;i++){
var info = list[i];
if(info.state==0){
System.gid("div"+info.id.toString()).className = "divstyle";
System.gid("title"+info.id.toString()).className = "titlecolor";
info.checked = false;
}
}
},
moveLeft : function(){
var layerModel = Layer.getItemByChecked();
var index = layerModel.index;
if (layerModel==null){ alert("请至少选择一个图层进行操作！"); }
var leftIndex = -1;
if((index % 2) == 0){ leftIndex = index -1; }
if(leftIndex>0 && leftIndex<=layerIndex){
var model = Layer.getItemByIndex(leftIndex);
layerModel.index = leftIndex;
model.index = index;
}
Layer.selectLayer(layerModel.id);
},
moveRight : function(){
var layerModel = Layer.getItemByChecked();
var index = layerModel.index;
if (layerModel==null){ alert("请至少选择一个图层进行操作！"); }
var rightIndex = -1;
rightIndex = index + 1;
if(rightIndex>0 && rightIndex<=layerIndex){
var model = Layer.getItemByIndex(rightIndex);
layerModel.index = rightIndex;
model.index = index;
}
Layer.selectLayer(layerModel.id);
},
moveUp : function(){
var layerModel = Layer.getItemByChecked();
var index = layerModel.index;
if (layerModel==null){ alert("请至少选择一个图层进行操作！"); }
var topIndex = -1;
topIndex = index -2;
if(topIndex>0 && topIndex<=layerIndex){
var model = Layer.getItemByIndex(topIndex);
layerModel.index = topIndex;
model.index = index;
}
Layer.selectLayer(layerModel.id);
},
moveBottom : function(){
var layerModel = Layer.getItemByChecked();
var index = layerModel.index;
if (layerModel==null){ alert("请至少选择一个图层进行操作！"); }
var bottomIndex = -1;
bottomIndex = index + 2;
if(bottomIndex>0 && bottomIndex<=layerIndex){
var model = Layer.getItemByIndex(bottomIndex);
layerModel.index = bottomIndex;
model.index = index;
}
Layer.selectLayer(layerModel.id);
},
checkText : function(){
var info="";
var newInfoLeft = "";
var newInfoRight = "";
var itemInfo = "";
list.sort(function(a,b){return a.index-b.index;});
for(var i=0;i<list.length;i++){
var model = list[i];
itemInfo += "{itemid},{checked},{state},{index};".Replace("{itemid}",model.id).Replace("{checked}",model.checked).Replace("{state}",model.state).Replace("{index}",model.index);
if(model.state==0){
if((model.index % 2)==0){ newInfoRight += divFinallyInfoRight.Replace("{name}",model.name).Replace("{label}",model.label).Replace("{id}",model.id);}
else { newInfoLeft += divFinallyInfoLeft.Replace("{name}",model.name).Replace("{label}",model.label).Replace("{id}",model.id); }
info = "<table style=/"width:100%;margin:0px;padding:0px;/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" ><tr><td style=/"width:48%;padding:2px;/" valign=/"top/">" + newInfoLeft + "</td><td style=/"width:48%;padding:2px;/" valign=/"top/">" + newInfoRight + "</td></tr></table>"
}
}
itemInput.value = itemInfo;
textInput.value = info;
},
systemDeal : function(){
Layer.freshLayerInfo();
Layer.checkListItem();
Layer.checkAddRemoveButton();
Layer.checkDirectionButton(true);
Layer.checkText();
}
};
var System = {
gid : function(idName) {
return document.getElementById(idName);
},
gname : function(name) {
return document.getElementsByName(name);
}
};
String.prototype.Replace = function(AFindText,ARepText){
var raRegExp = new RegExp(AFindText,"g");
return this.replace(raRegExp,ARepText);
};
list[0] = new layerModel(2,"周报表",false,1,"clientweekreport",0)
list[1] = new layerModel(3,"月报表",false,1,"clientmonthreport",0)
list[2] = new layerModel(4,"我的客户分布图",true,1,"personclientdistribute",0)
list[3] = new layerModel(6,"焦点新闻",true,1,"onlinenews",0)
list[4] = new layerModel(9,"快速通道",false,1,"quickchannel",0)
list[5] = new layerModel(10,"每日一问",true,1,"everydaytopic",0)
list[6] = new layerModel(1,"提醒记录",false,0,"personremind",1)
list[7] = new layerModel(5,"常用工具箱",false,0,"commontools",2)
list[8] = new layerModel(7,"在线翻译",false,0,"tranenglish",3)
list[9] = new layerModel(8,"天气预报",false,0,"weatherbulletin",4)
Layer.systemDeal();
</script>
</body>
</html>
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
