- 浏览: 43676 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
ljlj:
能否请教一下关于tiles的问题!
使用Tiles总结 -
yaoneng:
有用,谢谢!
tomcat https访问设置 -
xiaoyanzi1205:
您好,我也是这么设置好了,但是如果IE浏览器如果不勾选使用TL ...
tomcat https访问设置 -
lxs647:
页面技术---js拖拽和DIV的层控制 -
liuqimeng1:
写的很好,顺序排的好像有点乱。。。呵呵
Quartz --实现由时间触发的事件任务
一直想学习下J2EE中页面部分的相关技术,可是手头项目一直比较忙,所以没有去怎么样就,最近突然变得有空闲了,于是便自己做了个关于js拖拽和DIV的层控制,现在将代码贴上,请读者们多多指教:
1.test.html
2.test.js
3,mytable.css
另图片夹作为附件上传,将以上文件放在同目录下,用IE打开test.html即可运行查看效果
1.test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>table</title> <LINK href="mytable.css" type=text/css rel=stylesheet> <SCRIPT src="test.js" type=text/javascript></SCRIPT> <SCRIPT type=text/javascript> </SCRIPT> </head> <body> <DIV id=desktop_config><IMG id=img_all_resize title="全部 展开/折叠" onclick=resize_all() src="images/expand_arrow.png"></DIV> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD id=col_l vAlign=top width="65%"> <DIV class="module listColor" id=module_13> <DIV class=head > <H4 class=moduleHeader id=module_13_head> <A class=expand href="javascript:_resize(13);"><IMG class=icon id=img_resize_13 title=折叠 src="images/expand_arrow.png"></A> <SPAN class=text id=module_13_text onclick=_resize(13);>今日计划1</SPAN> <SPAN class=title id=module_13_title style="CURSOR: move"></SPAN> <SPAN class=close id=module_13_op> <A class=PageLinkDisable id=module_13_link_pre title=上一页 href="javascript:nextPage('13',-1);"><B>▲</B></A> <A id=module_13_link_next title=下一页 href="javascript:nextPage('13',1);"><B>▼</B></A> <A href="http://www.baidu.com">全部</A> <A title=设置 href="javascript:_edit(13);"><IMG src="images/pencil.png"></A> <A title=关闭模块 href="javascript:_del(13);"><IMG src="images/close_x.png"></A> </SPAN> </H4> </DIV> <DIV class=module_body id=module_13_body> <DIV class=module_div id=module_13_ul style="HEIGHT: 100px"> <UL> <LI>暂无工作计划 <UL> <SCRIPT> function plan_detail(PLAN_ID) { URL='/general/work_plan/show/plan_detail.php?PLAN_ID='+PLAN_ID; myleft=(screen.availWidth-500)/2; window.open(URL,'read_work_plan','height=500,width=600,status=1,toolbar=no,menubar=no,location=no,scrollbars=yes,top=120,left='+myleft+',resizable=yes'); } </SCRIPT> </UL> </LI> </UL> </marquee> </DIV> </DIV> </DIV> <DIV class="module listColor" id=module_14> <DIV class=head > <H4 class=moduleHeader id=module_14_head> <A class=expand href="javascript:_resize(14);"><IMG class=icon id=img_resize_14 title=折叠 src="images/expand_arrow.png"></A> <SPAN class=text id=module_14_text onclick=_resize(14);>今日计划2</SPAN> <SPAN class=title id=module_14_title style="CURSOR: move"></SPAN> <SPAN class=close id=module_14_op> <A class=PageLinkDisable id=module_14_link_pre title=上一页 href="javascript:nextPage('14',-1);"><B>▲</B></A> <A id=module_14_link_next title=下一页 href="javascript:nextPage('14',1);"><B>▼</B></A> <A href="http://www.baidu.com">全部</A> <A title=设置 href="javascript:_edit(14);"><IMG src="images/pencil.png"></A> <A title=关闭模块 href="javascript:_del(14);"><IMG src="images/close_x.png"></A> </SPAN> </H4> </DIV> <DIV class=module_body id=module_14_body> <DIV class=module_div id=module_14_ul style="HEIGHT: 100px"> <UL> <LI>暂无工作计划 <UL> <SCRIPT> </SCRIPT> </UL> </LI> </UL> </DIV> </DIV> </DIV> <DIV name="fill"></DIV> </TD> <TD id=col_r style="PADDING-RIGHT: 10px" vAlign=top width="35%"> <DIV class="module listColor" id=module_23> <DIV class=head> <H4 class=moduleHeader id=module_23_head> <A class=expand href="javascript:_resize(23);"><IMG class=icon id=img_resize_23 title=折叠 src="images/expand_arrow.png"></A> <SPAN class=text id=module_23_text onclick=_resize(23);>便签</SPAN> <SPAN class=title id=module_23_title style="CURSOR: move"></SPAN> <SPAN class=close id=module_23_op><A class=PageLinkDisable id=module_23_link_pre title=上一页 href="javascript:nextPage('23',-1);"><B>▲</B></A> <A id=module_23_link_next title=下一页 href="javascript:nextPage('23',1);"><B>▼</B></A> <A title=设置 href="javascript:_edit(23);"><IMG src="images/pencil.png"></A> <A title=关闭模块 href="javascript:_del(23);"><IMG src="images/close_x.png"></A> </SPAN> </H4> </DIV> <DIV class=module_body id=module_23_body> <DIV class=module_div id=module_23_ul style="HEIGHT: 100px"> <TEXTAREA id=note_1 onblur=saveNotes() style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; OVERFLOW-Y: auto; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: #ffffcc; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; WIDTH: 93%; PADDING-TOP: 5px; HEIGHT: 285px; BORDER-RIGHT-WIDTH: 0px"></TEXTAREA> <SCRIPT language=JavaScript> </SCRIPT> </DIV> </DIV> </DIV> <DIV name="fill"></DIV> </TD> </TR> </TBODY> </TABLE> <SCRIPT type=text/javascript> _upc(2); </SCRIPT> <DIV id=overlay></DIV> <DIV class="dialogBlock module" id=optionBlock style="DISPLAY: none; WIDTH: 300px"> <H4 class=moduleHeader> <SPAN class=title id=optionBlockTitle>模块选项</SPAN> <A class=option href="javascript:hide_msg('optionBlock');"><IMG src="images/close.png"></A> </H4> <DIV class=module_body id=msgBody> <DIV> 显示的行数:<INPUT class=SmallInput id=display_lines size=5 value=5></DIV> <DIV> <LABEL for=scroll>列表上下滚动显示</LABEL><INPUT id=scroll type=checkbox></DIV> </DIV> <H4 class=moduleHeader><SPAN class=title>全局选项</SPAN></H4> <DIV class=module_body id=msgBody> <DIV> 左侧栏目宽度:<INPUT class=SmallInput id=col_width size=5 value=65>%</DIV> </DIV> <DIV class=moduleFooter id=msgCommand> <INPUT id=module_id type=hidden> <INPUT class=BigButton onclick=SetNums() type=button value=确定> <INPUT class=BigButton onclick="hide_msg('optionBlock')" type=button value=取消> </DIV> <DIV class=moduleFooter id=msgSuccess style="DISPLAY: none"> <H2>保存成功!</H2><INPUT class=BigButton onclick="hide_msg('optionBlock')" type=button value=关闭> </DIV> </DIV> </body> </html>
2.test.js
//装载col下的元素 var colArray = [] //移动时间的ID var moveEndInterval = 0; //表示创建层是否已经存在 var am=null; //标识头部是否已经初始化 var isInitedHead=false; //保存便签失败后进行重新保存的时间 var timeout = 3000; //记录设置层的具体HTML,以便设置完成后还原 var msgBlockHTML = ""; //工具方法,使用ID获取变量 var $ = function(id) {return document.getElementById(id);}; /** * 标题栏动作设置 */ var titleAction = { "obj":null, "init":function(title_i){ title_i.onmousedown=titleAction.start; if ( isNaN(parseInt(createDiv().style.left)) ) { createDiv().style.left="0px"; } if ( isNaN(parseInt(createDiv().style.top)) ) { createDiv().style.top="0px"; } title_i.onDragStart = new Function(); title_i.onDragEnd = new Function(); title_i.onDrag = new Function(); }, "start":function(currEvent){ //当前动作对象 var currTitle = titleAction.obj = this; currEvent = titleAction.fixE(currEvent); var divLeft = parseInt(createDiv().style.left); var divTop = parseInt(createDiv().style.top); //执行自定义事件 currTitle.onDragStart(divLeft,divTop,currEvent.clientX,currEvent.clientY); //保留当前鼠标的位置 currTitle.lastMouseX = currEvent.clientX; currTitle.lastMouseY = currEvent.clientY; //添加事件 document.onmousemove = titleAction.drag; document.onmouseup = titleAction.end; }, "drag":function(currEvent){ currEvent=titleAction.fixE(currEvent); //当前动作对象 var currTitle=titleAction.obj; //获取鼠标当前的位置 var mouseX = currEvent.clientX; var mouseY = currEvent.clientY; //获取创建层的位置,并移动到新的位置 var divLeft = parseInt(createDiv().style.left); var divTop = parseInt(createDiv().style.top); var createDivX = mouseX-currTitle.lastMouseX+divLeft; var createDivY = mouseY-currTitle.lastMouseY+divTop; createDiv().style.left = createDivX+"px"; createDiv().style.top = createDivY+"px"; //保留当前鼠标的位置 currTitle.lastMouseX = mouseX; currTitle.lastMouseY = mouseY; //执行自定义事件,移动原来DIV的顺序 currTitle.onDrag(createDivX,createDivY,currEvent.clientX,currEvent.clientY); return false }, "end":function(){ document.onmousemove=null; document.onmouseup=null; titleAction.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top)); titleAction.obj=null; }, "fixE":function(actionevent){ if (typeof actionevent=="undefined") { actionevent=window.event; } if (typeof actionevent.layerX=="undefined") { actionevent.layerX=actionevent.offsetX; } if (typeof actionevent.layerY=="undefined") { actionevent.layerY=actionevent.offsetY; } return actionevent } }; /** * 初始化Head */ function _upc(cols) { initHead([$("col_l"),$("col_r")]); } /** * 获取HttpRequest */ function getXMLHttpObj() { var a=null; if(window.ActiveXObject) { a=new ActiveXObject("Msxml2.XMLHTTP"); if(!a) { a=new ActiveXObject("Microsoft.XMLHTTP"); } } else if(window.XMLHttpRequest) { a=new XMLHttpRequest(); } return a; } /** * 创建一个层,如果已经存在就直接返回 */ function createDiv() { if(!am) { am=document.createElement("DIV"); am.style.display="block"; am.style.position="absolute"; am.style.cursor="move"; am.style.backgroundColor="#ffffff"; am.style.paddingBottom="0px"; document.body.appendChild(am) } return am } /** * 初始化Head */ function initHead(td){ if(isInitedHead) return; isInitedHead=true; colArray=td; for(var i=0;i<colArray.length;i++) { var divModule = colArray[i].childNodes; for(var j=0;j<divModule.length;j++) { var module_i = divModule[j] var head_i = $(module_i.id+"_head"); if(!head_i){ continue; } head_i.module = module_i; head_i.onmouseover = function(){var op_i=$(this.module.id+"_op");if(op_i)op_i.style.display="inline";} head_i.onmouseout = function(){var op_i=$(this.module.id+"_op");if(op_i)op_i.style.display="none";} //设置title宽度 fixTitleWidth(module_i.id); var title_i = $(module_i.id+"_title"); title_i.module = module_i; //初始化标题栏 titleAction.init(title_i); //定义开始移动的事件(自定义,在titleAction/start中被执行) title_i.onDragStart=function(divLeft,divTop) { clearInterval(moveEndInterval); //获取模块 var module_i=this.module; //设置当与模块平级的相关模块(含本模块)的pagePosLeft与pagePosTop setCurrAfterOffset(module_i); module_i.origNextSibling=module_i.nextSibling; var module_i_copy=createDiv(); module_i_copy.style.left=getOffset(module_i,"Left"); module_i_copy.style.top=getOffset(module_i,"Top"); module_i_copy.style.height=module_i.offsetHeight; module_i_copy.style.width=module_i.offsetWidth; module_i_copy.style.display="block"; module_i_copy.style.opacity=0.8; module_i_copy.style.filter="alpha(opacity=80)"; module_i_copy.innerHTML=module_i.innerHTML; module_i_copy.className=module_i.className; this.dragged=false }; title_i.onDrag = function(divLeft,divTop){ setModulePos(this.module,divLeft,divTop); this.dragged=true; }; title_i.onDragEnd = function(divLeft,divTop){ //移动过 if(this.dragged){ //设置循环调用,将复制的模块移动到指定的位置 moveEndInterval=moveEndSetInterval(this.module,150,15); }else{ createDivStyle(); } //这里做AJAX操作提交改变到数据库 } } } //根据cookie去初始化模块的伸缩 resizeByCookie(); //初始化模块的相关设置 initModuleByCookie(); } /** * 初始化模块的相关属性 */ function initModuleByCookie(){ var my_width_1 = getCookie("my_width_1"); var isSetTitleWidth = false; if(my_width_1&&my_width_1!=65){ $("col_l").width = my_width_1+"%"; $("col_r").width = (100-my_width_1)+"%"; //重新设置TITLE宽度 isSetTitleWidth = true; } for(var i=0;i<colArray.length;i++) { for(var j=0;j<colArray[i].childNodes.length;j++) { var module_i=colArray[i].childNodes[j]; var module_number = module_i.id.substr(7,module_i.id.length) var module_ul = $("module_"+module_number+"_ul"); if(!module_ul){ continue; } var my_nums_1 = getCookie("my_nums_1_"+module_number); var my_scroll_1 = getCookie("my_scroll_1_"+module_number); if(my_nums_1&&my_nums_1!=5){ $("module_"+module_number+"_ul").style.height = 20*my_nums_1+"px"; } if(my_scroll_1){ if(module_ul.getElementsByTagName("ul").length>0){ if(module_ul.getElementsByTagName("marquee").length>0){ $("module_"+module_number+"_ul").childNodes[0].innerHTML = "<marquee height='100%' direction='up' behavior=scroll scrollamount=2 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' border=0>"+module_ul.innerHTML+"</marquee>"; } } } //重新设置宽度 if(isSetTitleWidth){ fixTitleWidth(module_i.id); } } } } /** * 将createDiv移动到指定层的位置 * allTime:移动消耗总的时间 * allCount:移动消耗总的循环次数 */ function moveEndSetInterval(module_i,allTime,allCount){ var divLeft = parseInt(createDiv().style.left); var divTop = parseInt(createDiv().style.top); var oneMoveLeft = (divLeft-this.getOffset(module_i,"Left"))/allCount; var oneMoveTop = (divTop-this.getOffset(module_i,"Top"))/allCount; return setInterval( function(){ if(allCount<1){ clearInterval(moveEndInterval); createDivStyle(); //设置宽度 fixTitleWidth(module_i.id); return; } allCount--; divLeft-=oneMoveLeft; divTop-=oneMoveTop; createDiv().style.left = divLeft; createDiv().style.top = divTop; } ,allTime/allCount); } function createDivStyle() { createDiv().style.display="none"; } /** * 获取最近的模块并改变原先DIV的顺序 */ function setModulePos(obj,posLeft,posTop) { var module=null; var referDistance=100000000; //获取离复制层最近的模块 for(var i=0;i<colArray.length;i++) { for(var j=0;j<colArray[i].childNodes.length;j++) { var module_i=colArray[i].childNodes[j]; //过滤自己 if(module_i==obj){ continue; } var currentDistance=Math.sqrt(Math.pow(posLeft-module_i.pagePosLeft,2)+Math.pow(posTop-module_i.pagePosTop,2)); if(isNaN(currentDistance)) continue; if(currentDistance<referDistance) { referDistance=currentDistance; module=module_i; } } } //得到的最近的模块不为NULL&&不是obj相邻的模块 if(module!=null&&obj.nextSibling!=module) { module.parentNode.insertBefore(obj,module); } } /** * 获取在body范围内的Offset */ function getOffset(obj,leftOrTop) { var offsetValue=0; while(obj!=null) { offsetValue+=obj["offset"+(leftOrTop=="Left"?"Left":"Top")]; obj=obj.offsetParent } return offsetValue } /** * 设置当与模块平级的相关模块(含本模块)的pagePosLeft与pagePosTop */ function setCurrAfterOffset(currModule_i){ for(var i=0;i<colArray.length;i++) { var divModule = colArray[i].childNodes; var oneHeigth = 0; for(var j=0;j<divModule.length;j++) { var module_i = divModule[j] if(!module_i.id&&module_i.name!="fill"){ continue; } if(module_i==currModule_i){ oneHeigth = module_i.offsetHeight; } module_i.pagePosLeft = this.getOffset(module_i,"Left"); module_i.pagePosTop = this.getOffset(module_i,"Top")-oneHeigth; } } } /** * 设置title的宽度 */ function fixTitleWidth(module_id) { if(!$(module_id)) return; var titleWidth = 0; while($(module_id+"_head").scrollWidth - $(module_id+"_text").scrollWidth - 120 - 40 - titleWidth<0||$(module_id+"_head").scrollWidth - $(module_id+"_text").scrollWidth - 120 - 40 - titleWidth>10){ titleWidth = $(module_id+"_head").scrollWidth - $(module_id+"_text").scrollWidth - 120 - 40; $(module_id+"_title").style.width = titleWidth+"px"; } } /*******************************************关于模块上的工具按钮**********************************/ /** * 获取cookie */ function getCookie(name) { var arr = document.cookie.split("; "); for(i=0;i<arr.length;i++) { if (arr[i].split("=")[0] == name) { return unescape(arr[i].split("=")[1]); } } return null; } /** * 设置cookie */ function setCookie(name,value) { var today = new Date(); var expires = new Date(); expires.setTime(today.getTime() + 1000*60*60*24*2000); document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString(); } /** * 伸缩模块,并记录到cookie */ function _resize(module_id,isExpand) { var module_i=$("module_"+module_id); var head_i=$("module_"+module_id+"_head"); var body_i=$("module_"+module_id+"_body"); var img_i=$("img_resize_"+module_id); var my_cookie=getCookie("my_expand_1"); my_cookie = (my_cookie==null || my_cookie=="undefined") ? "" : my_cookie;//alert(my_cookie) if(isExpand==null){ if(body_i.style.display=="none") { module_i.className=module_i.className.substr(0,module_i.className.lastIndexOf(" ")); head_i.className=head_i.className.substr(0,head_i.className.lastIndexOf(" ")); body_i.style.display="block"; img_i.src=img_i.src.substr(0,img_i.src.lastIndexOf("/")+1)+"expand_arrow.png"; img_i.title="折叠"; if(my_cookie.indexOf(module_id+",") == 0) my_cookie = my_cookie.replace(module_id+",", ""); else if(my_cookie.indexOf(","+module_id+",") > 0) my_cookie = my_cookie.replace(","+module_id+",", ","); } else if(body_i.style.display!="none") { module_i.className=module_i.className+" listColorCollapsed"; head_i.className=head_i.className+" moduleHeaderCollapsed"; body_i.style.display="none"; img_i.src=img_i.src.substr(0,img_i.src.lastIndexOf("/")+1)+"collapse_arrow.png"; img_i.title="展开"; if(my_cookie.indexOf(module_id+",") != 0 && my_cookie.indexOf(","+module_id+",") <= 0) my_cookie += module_id+","; } }else if(isExpand==true){ if(body_i.style.display=="none"){ module_i.className=module_i.className.substr(0,module_i.className.lastIndexOf(" ")); head_i.className=head_i.className.substr(0,head_i.className.lastIndexOf(" ")); body_i.style.display="block"; img_i.src=img_i.src.substr(0,img_i.src.lastIndexOf("/")+1)+"expand_arrow.png"; img_i.title="折叠"; if(my_cookie.indexOf(module_id+",") == 0) my_cookie = my_cookie.replace(module_id+",", ""); else if(my_cookie.indexOf(","+module_id+",") > 0) my_cookie = my_cookie.replace(","+module_id+",", ","); } }else if(isExpand==false){ if(body_i.style.display!="none") { module_i.className=module_i.className+" listColorCollapsed"; head_i.className=head_i.className+" moduleHeaderCollapsed"; body_i.style.display="none"; img_i.src=img_i.src.substr(0,img_i.src.lastIndexOf("/")+1)+"collapse_arrow.png"; img_i.title="展开"; if(my_cookie.indexOf(module_id+",") != 0 && my_cookie.indexOf(","+module_id+",") <= 0) my_cookie += module_id+","; } } setCookie("my_expand_1", my_cookie); } /** * 伸缩所有的模块,并记录到cookie */ function resize_all() { var ima_all_resize = $("img_all_resize"); var imgs=document.getElementsByTagName("IMG"); var imgsrc = img_all_resize.src; var lastIndex = img_all_resize.src.lastIndexOf("/"); var isExpand = false; if(imgsrc.substr(lastIndex+1,imgsrc.length)=="collapse_arrow.png") { img_all_resize.src=imgsrc.substr(0,lastIndex+1)+"expand_arrow.png"; isExpand = true; setCookie("my_expand_all_1", "1"); } else { img_all_resize.src=imgsrc.substr(0,lastIndex+1)+"collapse_arrow.png"; isExpand = false; setCookie("my_expand_all_1", "0"); } //调整所有模块 for(var i=0;i<imgs.length;i++) { if(imgs[i].id.substr(0,11)!="img_resize_") continue; var module_id=imgs[i].id.substr(11,imgs[i].id.length); _resize(module_id,isExpand); } } /** * 根据cookie记录来初始化伸缩 */ function resizeByCookie(){ //设置resize_all var mycookie_all = getCookie("my_expand_all_1"); if(mycookie_all!=null&&mycookie_all!=""){ var ima_all_resize = $("img_all_resize"); var imageName = mycookie_all=="1"?"expand_arrow.png":"collapse_arrow.png"; var imgsrc = img_all_resize.src; var lastIndex = img_all_resize.src.lastIndexOf("/"); img_all_resize.src=imgsrc.substr(0,lastIndex+1)+imageName; } //设置resize var mycookie = getCookie("my_expand_1"); if(mycookie!=null&&mycookie!=""){ var expands_id = mycookie.split(","); for(var i=0;i<expands_id.length-1;i++){ var module_id = expands_id[i]; var module_i=$("module_"+module_id); var head_i=$("module_"+module_id+"_head"); var body_i=$("module_"+module_id+"_body"); var img_i=$("img_resize_"+module_id); module_i.className=module_i.className+" listColorCollapsed"; head_i.className=head_i.className+" moduleHeaderCollapsed"; body_i.style.display="none"; img_i.src=img_i.src.substr(0,img_i.src.lastIndexOf("/")+1)+"collapse_arrow.png"; img_i.title="展开"; } } } /** * 翻页 */ function nextPage(module_id,page){ var module_Ul=$('module_'+module_id+'_ul'); if(!module_Ul) return; if(module_Ul.currPageIndex==null||module_Ul.currPageIndex=="undefined"){ module_Ul.currPageIndex = 1; } //进行ajax请求数据 _sendXMLGetRequest("http://192.168.1.108:8081/JLEAP/mainframe/test.jsp",module_id,"nextPage"); } /** * 请求数据,请求方式为Get * type:请求的自定义类型 */ function _sendXMLGetRequest(URL,paramtes,type){ var xmlHttpObj=getXMLHttpObj(); xmlHttpObj.open("GET",URL,true); xmlHttpObj.onreadystatechange=function(){ if(xmlHttpObj.readyState==4) { //请求下页数据 if(type == "nextPage"){ showNextPage(paramtes,xmlHttpObj.responseText); }else if(type = "_del"){ showDelMoudle(); } } } xmlHttpObj.send(null); } /** * 请求数据,请求方式为POST * type:请求的自定义类型 */ function _sendXMLPostRequest(URL,paramtes,type){ var xmlHttpObj = getXMLHttpObj(); xmlHttpObj.open("POST", URL,true); xmlHttpObj.setRequestHeader("Method", "POST notes.php HTTP/1.1"); xmlHttpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttpObj.onreadystatechange = function() { if (xmlHttpObj.readyState == 4){ //保存便签 if(type=="saveNotes"){ showSaveNotes(xmlHttpObj); } } }; xmlHttpObj.send(paramtes); } /** * 保存便签内容 */ function saveNotes() { alert("999999990"); var paramtes = "CONTENT="+encodeURIComponent($("note_1").value); _sendXMLPostRequest("http://192.168.1.108:8081/JLEAP/mainframe/test.jsp",paramtes,"saveNotes"); } /** * 保存便签后的操作 */ function showSaveNotes(xmlHttpObj){ var s; try {s = xmlHttpObj.status;}catch (ex) { alert(ex.description); } if (s == 200){ if(xmlHttpObj.responseText.substr(0,3)!="+OK"){ alert("保存便签内容错误,错误信息:\n"+xmlHttpObj.responseText); window.setTimeout("saveNotes()", timeout); timeout = timeout*2; } else{ timeout=3000; } } else{ alert("保存便签内容错误,错误代码:"+s); window.setTimeout("save_notes()", timeout); timeout = timeout*2; } } /** * 显示相关下页数据 */ function showNextPage(module_id,responseText){ } /** * 删除模块后的动作 */ function showDelMoudle(){ } /** * 删除模块 */ function _del(a) { msg="确认不显示该模块么?"; if(window.confirm(msg)) { var module=$("module_"+a); if(module) module.style.display="none"; _sendXMLGetRequest("http://192.168.1.108:8081/JLEAP/mainframe/test.jsp",null,"_del") } } /** * 模块设置 */ function _edit(module_id) { show_msg("optionBlock"); $("optionBlockTitle").innerText=$("module_"+module_id+"_text").innerText+" 模块选项"; $('display_lines').focus(); $('display_lines').value=lines_per_page(module_id); $('scroll').checked=getCookie("my_scroll_1_"+module_id)=="true"; var my_width_1 = parseInt(getCookie("my_width_1")) $('col_width').value=my_width_1?my_width_1:65; $('module_id').value=module_id; } /** * 显示覆盖层和设置层 */ function show_msg(msgBlock) { msgBlockHTML = $(msgBlock).innerHTML; $("overlay").style.display = 'block'; $(msgBlock).style.display = 'block'; var bb=(document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; if(document.compatMode && document.compatMode!="BackCompat") { $("overlay").style.width = bb.scrollWidth+"px"; $("overlay").style.height = bb.scrollHeight+"px"; } else { $("overlay").style.width = bb.scrollWidth+"px"; $("overlay").style.height = bb.scrollHeight+"px"; } $(msgBlock).style.left = ((bb.offsetWidth - $(msgBlock).offsetWidth)/2)+"px"; $(msgBlock).style.top = (60 + bb.scrollTop)+"px"; } /** * 隐藏覆盖层和设置层,并做还原处理 */ function hide_msg(msgBlock) { $(msgBlock).innerHTML = msgBlockHTML; $("overlay").style.display = 'none'; $(msgBlock).style.display = 'none'; } /** * 设置模块,提交数据并保存到COOKIE */ function SetNums() { var today_lines=$('display_lines').value; var col_width=$('col_width').value; if(today_lines=="" || checkNum(today_lines) || col_width=="" || checkNum(col_width)) { alert("显示条数和栏目宽度必须是数字"); return; } if(parseInt(today_lines)<=0 || parseInt(today_lines)>=1000) { alert("显示条数必须在1-1000之间"); return; } if(parseInt(col_width)<=0 || parseInt(col_width)>100) { alert("栏目宽度必须在1-100之间"); return; } setCookie("my_nums_1_"+$('module_id').value, today_lines); setCookie("my_scroll_1_"+$('module_id').value, $('scroll').checked); setCookie("my_width_1", col_width); //my_width=col_width; $("msgBody").style.display = "none"; $("msgCommand").style.display = "none"; $("msgSuccess").style.display = "block"; window.location.reload(); } /** * 获取当前容纳的行数 */ function lines_per_page(module_id) { return Math.floor(parseInt($("module_"+module_id+"_ul").style.height)/20); } /** * 检查是否为数字类型 */ function checkNum(str) { var re=/\D/; return str.match(re); }
3,mytable.css
HTML { OVERFLOW-Y: scroll } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #e2e5e6; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } A:link { COLOR: #0066cc; TEXT-DECORATION: none } A:visited { COLOR: #0066cc; TEXT-DECORATION: none } A:hover { COLOR: #333333; TEXT-DECORATION: underline } A:active { COLOR: #333333; TEXT-DECORATION: underline } UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 3px; LINE-HEIGHT: 20px; PADDING-TOP: 0px } LI { PADDING-RIGHT: 0px; PADDING-LEFT: 16px; BACKGROUND: url(black_dot.png) no-repeat left 50%; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 20px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } UNKNOWN { COLOR: #0066cc; TEXT-DECORATION: none } LI A:visited { COLOR: #333333; TEXT-DECORATION: none } LI A:hover { COLOR: #333333; TEXT-DECORATION: underline } LI A:active { COLOR: #333333; TEXT-DECORATION: underline } UNKNOWN { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-RIGHT-WIDTH: 0px } #desktop_config { PADDING-TOP: 5px } #desktop_config IMG { CURSOR: pointer } #overlay { DISPLAY: none; Z-INDEX: 10000; BACKGROUND: #000; FILTER: alpha(opacity=50); LEFT: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 100%; opacity: 0.5; moz-opacity: 0.5 } .dialogBlock { CLEAR: both; Z-INDEX: 10002; MARGIN: 10px auto; POSITION: absolute; TOP: 100px } .dialogBlock .menu { FLOAT: left; WIDTH: 120px } .dialogBlock .menu A { BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: white 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 3px; BORDER-LEFT: white 1px solid; COLOR: #645a44; PADDING-TOP: 3px; BORDER-BOTTOM: white 1px solid; TEXT-ALIGN: center; TEXT-DECORATION: none } .dialogBlock .menu A:hover { BORDER-LEFT-COLOR: #99cc00; BACKGROUND: url(bg_input_btn_hover.png) #f4fadf; BORDER-BOTTOM-COLOR: #80aa00; COLOR: #395500; BORDER-TOP-COLOR: #99cc00; TEXT-DECORATION: none! important; BORDER-RIGHT-COLOR: #80aa00 } .dialogBlock .menu .current { BORDER-LEFT-COLOR: #c8c4bb; BACKGROUND: url(bg_input_btn.png) #f4fbe1; BORDER-BOTTOM-COLOR: #aba498; BORDER-TOP-COLOR: #c8c4bb; BORDER-RIGHT-COLOR: #aba498 } .dialogBlock .subContent { BORDER-RIGHT: #b8d1e2 1px solid; BORDER-TOP: #b8d1e2 1px solid; BACKGROUND: url(bg_input_text.png) white repeat-x left top; FLOAT: right; BORDER-LEFT: #b8d1e2 1px solid; WIDTH: 500px; COLOR: #663300; BORDER-BOTTOM: #b8d1e2 1px solid } .module { BORDER-RIGHT: #dedcd8 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #dedcd8 1px solid; PADDING-LEFT: 0px; BACKGROUND: white; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 10px; BORDER-LEFT: #dedcd8 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #dedcd8 1px solid } .moduleHeader { PADDING-RIGHT: 1%; PADDING-LEFT: 1%; WIDTH:98%; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND: url(module_hd_bg.png) #f4f3f0 repeat-x left top; PADDING-BOTTOM: 3px; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 14px; PADDING-TOP: 3px; BORDER-BOTTOM: #dedcd8 1px dotted } .moduleHeader .icon { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 5px } .moduleHeader .text { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FLOAT: left; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; CURSOR: pointer; LINE-HEIGHT: 25px; PADDING-TOP: 2px } .moduleHeader .title { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FLOAT: left; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; LINE-HEIGHT: 25px; PADDING-TOP: 2px } .moduleHeader .option { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FLOAT: right; PADDING-BOTTOM: 2px; CURSOR: pointer; PADDING-TOP: 2px; TEXT-DECORATION: none } .moduleHeader .close { DISPLAY: none; 3px; PADDING-LEFT: 3px; FLOAT: right; PADDING-BOTTOM: 2px; CURSOR: pointer; PADDING-TOP: 2px; TEXT-ALIGN: right; TEXT-DECORATION: none } .module_body { PADDING-RIGHT: 1%! important; PADDING-LEFT: 1%! important; WIDTH:98%; FONT-SIZE: 9pt; PADDING-BOTTOM: 10px! important; MARGIN: 0px; OVERFLOW: hidden! important; important; PADDING-TOP: 10px! important } .moduleFooter { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center } .module_page { DISPLAY: none } .module_div { OVERFLOW: hidden } .PageLinkDisable { COLOR: #cccccc! important } .listColor { BORDER-RIGHT: #9f9f9f 1px solid; BORDER-TOP: #9f9f9f 1px solid; BORDER-LEFT: #9f9f9f 1px solid; COLOR: #000000; BORDER-BOTTOM: #9f9f9f 1px solid } .listColor HR { BORDER-BOTTOM: #dcdcdc 1px solid } .listColor .moduleHeader { BACKGROUND: url(images/list_hd_bg.png) #f4f3f0 repeat-x; BORDER-BOTTOM: #dedcd8 1px solid } .listColor .moduleHeaderCollapsed { BORDER-BOTTOM-WIDTH: 0px } .listColor .module_body { BACKGROUND: #eeebe8 } .listColor .bright { COLOR: #003366! important } BODY { FONT-SIZE: 9pt } FORM { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } A:link { COLOR: #0066cc; TEXT-DECORATION: none } A:visited { COLOR: #0066cc; TEXT-DECORATION: none } A:hover { COLOR: #333333; TEXT-DECORATION: underline } A:active { COLOR: #333333; TEXT-DECORATION: underline } A.A1:link { COLOR: #124164; TEXT-DECORATION: underline } A.A1:visited { COLOR: #124164; TEXT-DECORATION: underline } A.A1:active { COLOR: #124164; TEXT-DECORATION: underline } A.A1:hover { COLOR: #ff0000; TEXT-DECORATION: underline } A.orgAdd:link { PADDING-LEFT: 12px; BACKGROUND: url(org_select.png) no-repeat 0px 0px; COLOR: #207bd6 } A.orgAdd:visited { PADDING-LEFT: 12px; BACKGROUND: url(org_select.png) no-repeat 0px 0px; COLOR: #207bd6 } A.orgAdd:hover { COLOR: #207bd6; TEXT-DECORATION: underline } A.orgAdd:active { COLOR: #207bd6; TEXT-DECORATION: underline } A.orgClear:link { PADDING-LEFT: 12px; BACKGROUND: url(org_select.png) no-repeat 0px -60px; MARGIN-LEFT: 5px; COLOR: #9aa9b8 } A.orgClear:visited { PADDING-LEFT: 12px; BACKGROUND: url(org_select.png) no-repeat 0px -60px; MARGIN-LEFT: 5px; COLOR: #9aa9b8 } A.orgClear:hover { BACKGROUND-POSITION: 0px -40px; COLOR: #207bd6; TEXT-DECORATION: underline } A.orgClear:active { BACKGROUND-POSITION: 0px -40px; COLOR: #207bd6; TEXT-DECORATION: underline } A.addfile { DISPLAY: block; PADDING-LEFT: 12px; BACKGROUND: url(org_select.png) no-repeat 0px 3px; FLOAT: left; COLOR: #207bd6; POSITION: relative; TEXT-DECORATION: none } A.addfile:hover { BACKGROUND-POSITION: 0px -17px; COLOR: #9aa9b8; TEXT-DECORATION: underline } INPUT.addfile { FILTER: alpha(opacity=0); LEFT: -5px; WIDTH: 1px; CURSOR: pointer; POSITION: absolute; opacity: 0 } A.selfile:link { COLOR: #207bd6; TEXT-DECORATION: none } A.selfile:visited { COLOR: #207bd6; TEXT-DECORATION: none } A.selfile:hover { COLOR: #9aa9b8; TEXT-DECORATION: underline } A.selfile:active { COLOR: #9aa9b8; TEXT-DECORATION: underline } IMG { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } TABLE { BORDER-COLLAPSE: collapse } .bodycolor { BACKGROUND: #e2e5e6 } .loginbodycolor { BACKGROUND: #6ba2d8 } .topbar { FONT-SIZE: 9pt; BACKGROUND: url(topbar.gif) #c4d9ef } .topbar2 { FONT-SIZE: 9pt; BACKGROUND: url(menubg.gif) #c4d9ef } .panel { BACKGROUND: #c4d9ef; COLOR: #654125 } .timebar { BACKGROUND: #cedff1 } .menu_tr1 { FONT-SIZE: 9pt; BACKGROUND-IMAGE: url(topbar.gif); CURSOR: pointer; COLOR: #000000 } .menu_tr2 { FONT-SIZE: 9pt; BACKGROUND: #cedff1; CURSOR: pointer; COLOR: #000000 } .small { FONT-SIZE: 9pt } .small1 { FONT-SIZE: 9pt; COLOR: #000000 } .big { FONT-SIZE: 12pt } .big1 { FONT-SIZE: 12pt; COLOR: #000000 } .big2 { FONT-SIZE: 18pt } .big3 { FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #124164 } .big4 { COLOR: #ff0000 } .verybig { FONT-SIZE: 24pt } .ArrowButtonL { BACKGROUND: url(/images/previouspage.gif) no-repeat center center; WIDTH: 20px; HEIGHT: 16px } .ArrowButtonR { BACKGROUND: url(/images/nextpage.gif) no-repeat center center; WIDTH: 20px; HEIGHT: 16px } .ArrowButtonLL { BACKGROUND: url(/images/prevpreviouspage.png) no-repeat center center; WIDTH: 20px; HEIGHT: 16px } .ArrowButtonRR { BACKGROUND: url(/images/nextnextpage.png) no-repeat center center; WIDTH: 20px; HEIGHT: 16px } INPUT.SmallButton { BORDER-RIGHT: #6e91c7 1px solid; BORDER-TOP: #6e91c7 1px solid; FONT-SIZE: 9pt; BACKGROUND: url(button_bg.gif) #f4fbe1; BORDER-LEFT: #6e91c7 1px solid; BORDER-BOTTOM: #6e91c7 1px solid; HEIGHT: 20px; TEXT-DECORATION: none } INPUT.ArrowButton { BORDER-RIGHT: #6e91c7 1px solid; BORDER-TOP: #6e91c7 1px solid; FONT-SIZE: 9pt; BACKGROUND: url(button_bg.gif) #f4fbe1; BORDER-LEFT: #6e91c7 1px solid; BORDER-BOTTOM: #6e91c7 1px solid; HEIGHT: 20px; TEXT-DECORATION: none } INPUT.SmallButton:hover { BORDER-RIGHT: #80aa00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_btn_hover.png) #f4fadf; BORDER-LEFT: #99cc00 1px solid; COLOR: #395500; BORDER-BOTTOM: #80aa00 1px solid } INPUT.ArrowButton:hover { BORDER-RIGHT: #80aa00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_btn_hover.png) #f4fadf; BORDER-LEFT: #99cc00 1px solid; COLOR: #395500; BORDER-BOTTOM: #80aa00 1px solid } INPUT.BigButton { BORDER-RIGHT: #6e91c7 1px solid; BORDER-TOP: #6e91c7 1px solid; FONT-SIZE: 12pt; BACKGROUND: url(button_bg.gif) #f4fbe1; MARGIN: 1px; BORDER-LEFT: #6e91c7 1px solid; BORDER-BOTTOM: #6e91c7 1px solid; HEIGHT: 24px; TEXT-DECORATION: none } INPUT.BigButton:hover { BORDER-RIGHT: #80aa00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 12pt; BACKGROUND: url(bg_input_btn_hover.png) #f4fadf; BORDER-LEFT: #99cc00 1px solid; COLOR: #395500; BORDER-BOTTOM: #80aa00 1px solid } INPUT.SmallButtonAHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_a.png) no-repeat 0px -21px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 50px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonA { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_a.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 50px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonA:hover { BACKGROUND-POSITION: 0px -21px } INPUT.SmallButtonBHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_b.png) no-repeat 0px -21px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 74px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonB { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_b.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 74px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonB:hover { BACKGROUND-POSITION: 0px -21px } INPUT.SmallButtonCHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_c.png) no-repeat 0px -21px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 105px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonC { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_c.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 105px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonC:hover { BACKGROUND-POSITION: 0px -21px } INPUT.SmallButtonDHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_d.png) no-repeat 0px -21px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 160px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonD { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_d.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 160px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonD:hover { BACKGROUND-POSITION: 0px -21px } INPUT.SmallButtonEHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_e.png) no-repeat 0px -21px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 245px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(btn_e.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 245px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px } INPUT.SmallButtonE:hover { BACKGROUND-POSITION: 0px -21px } INPUT.BigButtonAHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_a.png) no-repeat 0px -24px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 60px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonA { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_a.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 60px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonA:hover { BACKGROUND-POSITION: 0px -24px } INPUT.BigButtonBHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_b.png) no-repeat 0px -24px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 84px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonB { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_b.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 84px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonB:hover { BACKGROUND-POSITION: 0px -24px } INPUT.BigButtonCHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_c.png) no-repeat 0px -24px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 125px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonC { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_c.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 125px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonC:hover { BACKGROUND-POSITION: 0px -24px } INPUT.BigButtonDHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_d.png) no-repeat 0px -24px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 195px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonD { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_d.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 195px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonD:hover { BACKGROUND-POSITION: 0px -24px } INPUT.BigButtonEHover { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_e.png) no-repeat 0px -24px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 305px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12pt; BACKGROUND: url(big_btn_e.png) no-repeat; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 305px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px } INPUT.BigButtonE:hover { BACKGROUND-POSITION: 0px -24px } INPUT.BigInput { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 10pt; BACKGROUND: url(bg_input_text.png) white repeat-x left top; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } TEXTAREA.BigInput { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 10pt; BACKGROUND: url(bg_input_text.png) white repeat-x left top; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } INPUT.BigInput:hover { BORDER-RIGHT: #99cc00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 10pt; BACKGROUND: url(bg_input_text_hover.png) white repeat-x left top; BORDER-LEFT: #99cc00 1px solid; BORDER-BOTTOM: #99cc00 1px solid } TEXTAREA.BigInput:hover { BORDER-RIGHT: #99cc00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 10pt; BACKGROUND: url(bg_input_text_hover.png) white repeat-x left top; BORDER-LEFT: #99cc00 1px solid; BORDER-BOTTOM: #99cc00 1px solid } INPUT.SmallInput { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_text.png) white repeat-x left top; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } TEXTAREA.SmallInput { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_text.png) white repeat-x left top; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } INPUT.SmallInput:hover { BORDER-RIGHT: #99cc00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_text_hover.png) white repeat-x left top; BORDER-LEFT: #99cc00 1px solid; BORDER-BOTTOM: #99cc00 1px solid } TEXTAREA.SmallInput:hover { BORDER-RIGHT: #99cc00 1px solid; BORDER-TOP: #99cc00 1px solid; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_text_hover.png) white repeat-x left top; BORDER-LEFT: #99cc00 1px solid; BORDER-BOTTOM: #99cc00 1px solid } INPUT.BigInputMoney { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12pt; BACKGROUND: #f8f8f8; BORDER-LEFT: black 1px solid; COLOR: #006; LINE-HEIGHT: normal; BORDER-BOTTOM: black 1px double; FONT-STYLE: normal; HEIGHT: 22px; TEXT-ALIGN: right; FONT-VARIANT: normal } INPUT.BigStatic { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 10pt; BACKGROUND: #e0e0e0; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } TEXTAREA.BigStatic { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 10pt; BACKGROUND: #e0e0e0; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } INPUT.SmallStatic { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 9pt; BACKGROUND: #e0e0e0; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } TEXTAREA.SmallStatic { BORDER-RIGHT: #c0bbb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c0bbb4 1px solid; PADDING-LEFT: 5px; FONT-SIZE: 9pt; BACKGROUND: #e0e0e0; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0bbb4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #c0bbb4 1px solid } SELECT.BigSelect { BORDER-RIGHT: #c0bbb4 1px solid; BORDER-TOP: #c0bbb4 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12pt; BACKGROUND: url(bg_input_text.png) white repeat-x left top; BORDER-LEFT: #c0bbb4 1px solid; COLOR: #000066; LINE-HEIGHT: normal; BORDER-BOTTOM: #c0bbb4 1px double; FONT-STYLE: normal; HEIGHT: 22px; FONT-VARIANT: normal } SELECT.BigSelect:hover { BORDER-RIGHT: #c0bbb4 1px solid; BORDER-TOP: #c0bbb4 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12pt; BACKGROUND: url(bg_input_text_hover.png) white repeat-x left top; BORDER-LEFT: #c0bbb4 1px solid; COLOR: #000066; LINE-HEIGHT: normal; BORDER-BOTTOM: #c0bbb4 1px double; FONT-STYLE: normal; HEIGHT: 22px; FONT-VARIANT: normal } SELECT.SmallSelect { BORDER-RIGHT: #c0bbb4 1px solid; BORDER-TOP: #c0bbb4 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_text.png) white repeat-x left top; BORDER-LEFT: #c0bbb4 1px solid; COLOR: #000066; LINE-HEIGHT: normal; BORDER-BOTTOM: #c0bbb4 1px double; FONT-STYLE: normal; HEIGHT: 18px; FONT-VARIANT: normal } SELECT.SmallSelect:hover { BORDER-RIGHT: #c0bbb4 1px solid; BORDER-TOP: #c0bbb4 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND: url(bg_input_text_hover.png) white repeat-x left top; BORDER-LEFT: #c0bbb4 1px solid; COLOR: #000066; LINE-HEIGHT: normal; BORDER-BOTTOM: #c0bbb4 1px double; FONT-STYLE: normal; HEIGHT: 18px; FONT-VARIANT: normal } SELECT.BigStatic { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12pt; BACKGROUND: #e0e0e0; BORDER-LEFT: black 1px solid; COLOR: #000066; LINE-HEIGHT: normal; BORDER-BOTTOM: black 1px double; FONT-STYLE: normal; HEIGHT: 22px; FONT-VARIANT: normal } SELECT.SmallStatic { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND: #e0e0e0; BORDER-LEFT: black 1px solid; COLOR: #000066; LINE-HEIGHT: normal; BORDER-BOTTOM: black 1px solid; FONT-STYLE: normal; HEIGHT: 18px; FONT-VARIANT: normal } .TableControl { BACKGROUND: url(footer_bg.png) left bottom } .TableHeader { FONT-WEIGHT: bold; FONT-SIZE: 9pt; BACKGROUND: url(images/list_hd_bg.png); COLOR: #2e2e5a; LINE-HEIGHT: 25px } .TableHeader1 { BACKGROUND: url(button_back.gif) #d3e5fa; CURSOR: pointer; COLOR: #000066 } .TableHeader2 { FONT-WEIGHT: bold; BACKGROUND: url(menubg.gif) #d3e5fa; CURSOR: pointer; COLOR: #000066 } .TableContent { BACKGROUND: #f0f0f0 } .TableData { BACKGROUND: #ffffff; COLOR: #000000 } .TableLine1 { BACKGROUND: #f3f3f3 } .TableLine2 { BACKGROUND: #ffffff } .TableRed { BACKGROUND: #ffebeb } .TextColor1 { COLOR: #ff6600 } .TextColor2 { COLOR: #ff0000 } .top { FONT-WEIGHT: bold; COLOR: #ff0000 } .percent { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666666 1px solid; MARGIN-TOP: 3px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 12px } .percent DIV { FONT-SIZE: 0px; MARGIN: 1px; HEIGHT: 8px } .percenttxt { MARGIN-TOP: 1px; FONT-SIZE: 9pt; FLOAT: left } .s_on { FONT-SIZE: 9pt; BACKGROUND: url(/images/topmenubg2.gif) } .s_of { FONT-SIZE: 9pt; BACKGROUND: url(/images/topmenubg1.gif) } .m_on { FONT-SIZE: 9pt; BACKGROUND: url(/images/topmenubg2.gif) } .border14-1 { BORDER-RIGHT: #2e2e5a 1px solid; BORDER-TOP: #2e2e5a 1px solid; FONT-SIZE: 14px; BORDER-LEFT: #2e2e5a 1px solid; BORDER-BOTTOM: #2e2e5a 1px solid } .border14-2 { BORDER-RIGHT: #2e2e5a 1px solid; FONT-SIZE: 14px; BORDER-BOTTOM: #2e2e5a 1px solid } .border14-3 { FONT-SIZE: 14px; BORDER-TOP-STYLE: none; BORDER-BOTTOM: #98bbd6 1px solid; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none } .border14-4 { BORDER-RIGHT: #98bbd6 1px solid; FONT-SIZE: 14px } .title_text { FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #0a5fa2 } .table_border { BORDER-RIGHT: #98bbd6 1px solid; BORDER-TOP: #98bbd6 1px solid; BORDER-LEFT: #98bbd6 1px solid; BORDER-BOTTOM: black 0px solid } .table_bg { BORDER-RIGHT: black 1px solid; BACKGROUND-POSITION: left 50%; BORDER-TOP: #2e2e5a 1px solid; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(bg_header.png); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: #2e2e5a 0px solid; BACKGROUND-REPEAT: repeat } .table_left { BACKGROUND-POSITION: left 50%; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(table_left.gif); BACKGROUND-REPEAT: no-repeat } .attach_name:link { COLOR: #0d3a73 } .attach_name:hover { COLOR: #0d3a73 } .attach_name:active { COLOR: #0d3a73 } .attach_name:visited { COLOR: #0d3a73 } .attach_div { BORDER-RIGHT: #124164 1px solid; BORDER-TOP: #124164 1px solid; DISPLAY: none; Z-INDEX: 10001; BACKGROUND: #ffffff; BORDER-LEFT: #124164 1px solid; WIDTH: 100px; BORDER-BOTTOM: #124164 1px solid; POSITION: absolute } .attach_div A { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; WIDTH: 100%; LINE-HEIGHT: 20px; PADDING-TOP: 3px } .attach_div A:hover { BACKGROUND: #e2e5e6; WIDTH: auto } .TableList { BORDER-RIGHT: #9f9f9f 1px solid; BORDER-TOP: #9f9f9f 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #9f9f9f 1px solid; LINE-HEIGHT: 25px; BORDER-BOTTOM: #9f9f9f 1px solid; BORDER-COLLAPSE: collapse } .TableList TD { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; COLOR: #000000; PADDING-TOP: 3px } .TableList .TableHeader TD { BORDER-RIGHT: #dcdcdc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #9f9f9f 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: url(images/list_hd_bg.png); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center } .TableList TD.TableHeader { BORDER-RIGHT: #dcdcdc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #9f9f9f 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BACKGROUND: url(images/list_hd_bg.png); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center } .TableList .TableLine1 TD { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #f8f8f8 } .TableList TD.TableLine1 { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #f8f8f8 } .TableList .TableLine2 TD { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #ffffff } .TableList TD.TableLine2 { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #ffffff } .TableList .TableData TD { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #ffffff } .TableList TD.TableData { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #ffffff } .TableList .TableContent TD { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #f0f0f0 } .TableList TD.TableContent { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: #f0f0f0 } .TableList .TableFooter TD { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableList .TableControl TD { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableList TD.TableFooter { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableList TD.TableControl { BORDER-TOP: #dcdcdc 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableList .TableRed TD { BACKGROUND: #ffebeb } .TableList TD.TableRed { BACKGROUND: #ffebeb } .TableList .TextColor1 TD { COLOR: #ff6600 } .TableList TD.TextColor1 { COLOR: #ff6600 } .TableList .TextColor2 TD { COLOR: #ff0000 } .TableList TD.TextColor2 { COLOR: #ff0000 } .TableBlock { BORDER-RIGHT: #124164 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #124164 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 9pt; PADDING-BOTTOM: 3px; BORDER-LEFT: #124164 1px solid; LINE-HEIGHT: 20px; PADDING-TOP: 3px; BORDER-BOTTOM: #124164 1px solid; BORDER-COLLAPSE: collapse } .TableBlock TD { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; COLOR: #000000; PADDING-TOP: 3px } .TableBlock .TableHeader TD { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #9f9f9f 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(images/list_hd_bg.png); COLOR: #124164; LINE-HEIGHT: 25px } .TableBlock TD.TableHeader { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #9f9f9f 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(images/list_hd_bg.png); COLOR: #124164; LINE-HEIGHT: 25px } .TableBlock .TableLine1 TD { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #f8f8f8 } .TableBlock TD.TableLine1 { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #f8f8f8 } .TableBlock .TableLine2 TD { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #ffffff } .TableBlock TD.TableLine2 { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #ffffff } .TableBlock .TableData TD { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #ffffff } .TableBlock TD.TableData { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #ffffff } .TableBlock .TableContent TD { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #f0f0f0 } .TableBlock TD.TableContent { BORDER-RIGHT: #606275 1px solid; BORDER-TOP: #606275 1px solid; BACKGROUND: #f0f0f0 } .TableBlock .TableFooter TD { BORDER-TOP: #606275 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableBlock .TableControl TD { BORDER-TOP: #606275 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableBlock TD.TableFooter { BORDER-TOP: #606275 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableBlock TD.TableControl { BORDER-TOP: #606275 1px solid; BACKGROUND: url(footer_bg.png) left bottom } .TableBlock .TableRed TD { BACKGROUND: #ffebeb } .TableBlock TD.TableRed { BACKGROUND: #ffebeb } .Content { LINE-HEIGHT: normal } .TableControl A { COLOR: #124164; TEXT-DECORATION: none } .TableBlock .TableRowHover TD { BACKGROUND: #e2e5e6 } .TableBlock TD.TableRowHover { BACKGROUND: #e2e5e6 } .TableBlock .TableRowActive TD { BACKGROUND: #7d95a5; COLOR: #ffffff } .TableBlock TD.TableRowActive { BACKGROUND: #7d95a5; COLOR: #ffffff } .MessageBox { BORDER-RIGHT: #124164 1px dotted; BORDER-TOP: #124164 1px dotted; MARGIN-TOP: 15px; BACKGROUND: #ffffff; MARGIN-BOTTOM: 15px; BORDER-LEFT: #124164 1px dotted; BORDER-BOTTOM: #124164 1px dotted } .MessageBox TD.msg { PADDING-RIGHT: 20px; PADDING-LEFT: 90px; FONT-WEIGHT: bold; PADDING-BOTTOM: 10px; PADDING-TOP: 5px; HEIGHT: 90px } .MessageBox TD.msg H4.title { FONT-SIZE: 18pt; MARGIN-BOTTOM: 10px; COLOR: #124164; BORDER-BOTTOM: #124164 1px dotted } .MessageBox TD.msg DIV.content { COLOR: #6bad42; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none } .MessageBox TD.error { BACKGROUND: url(/images/icon64_error.png) no-repeat 10px 10px } .MessageBox TD.info { BACKGROUND: url(/images/icon64_info.png) no-repeat 10px 10px } .MessageBox TD.warning { BACKGROUND: url(/images/icon64_warning.png) no-repeat 10px 10px } .MessageBox TD.forbidden { BACKGROUND: url(/images/icon64_forbidden.png) no-repeat 10px 10px } .MessageBox TD.stop { BACKGROUND: url(/images/icon64_stop.png) no-repeat 10px 10px } .MessageBox TD.blank { PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; HEIGHT: 40px; TEXT-ALIGN: center } .hightlight { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #ffff00; TEXT-DECORATION: underline } .banned { COLOR: #ff0000 } .mod { COLOR: #000000 } .filter { COLOR: #0000ff } .pageArea { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 330px; COLOR: #006efe; PADDING-TOP: 5px; TEXT-ALIGN: left } .pageArea IMG { CURSOR: pointer } .pageArea A { DISPLAY: inline-block; WIDTH: 30px; HEIGHT: 16px } .pageArea .pageFirst { BACKGROUND: url(/images/firstpage.gif) no-repeat center center } .pageArea .pagePrevious { BACKGROUND: url(/images/previouspage.gif) no-repeat center center } .pageArea .pageNext { BACKGROUND: url(/images/nextpage.gif) no-repeat center center } .pageArea .pageLast { BACKGROUND: url(/images/lastpage.gif) no-repeat center center } .pageArea .pageFirstDisable { BACKGROUND: url(/images/firstpage_disable.gif) no-repeat center center } .pageArea .pagePreviousDisable { BACKGROUND: url(/images/previouspage_disable.gif) no-repeat center center } .pageArea .pageNextDisable { BACKGROUND: url(/images/nextpage_disable.gif) no-repeat center center } .pageArea .pageLastDisable { BACKGROUND: url(/images/lastpage_disable.gif) no-repeat center center } .pageArea .pageGoto { BACKGROUND: url(/images/green_arrow.gif) no-repeat center center; WIDTH: 17px }
另图片夹作为附件上传,将以上文件放在同目录下,用IE打开test.html即可运行查看效果
- images.rar (119 KB)
- 描述: 测试项目中用到的图片
- 下载次数: 187
评论
3 楼
lxs647
2011-03-23
2 楼
sunyunsheng
2008-12-23
1 楼
yangtao309
2008-12-17
这样贴这么多的代码~ 也一时看不了
最好把部分关键代码在blog里下说明
阐述下拖曳DIV的实现方法...
然后贴上你实际运行时的工程项目源码就OK了
最好把部分关键代码在blog里下说明
阐述下拖曳DIV的实现方法...
然后贴上你实际运行时的工程项目源码就OK了
发表评论
-
11111111
2012-08-25 00:45 01111111111111111111111111111111 ... -
BPEL
2012-07-16 23:41 0BPELBPELBPELBPELBPELBPELBPELBPE ... -
超过了超过了
2012-07-13 00:26 0超过了超过了 -
自己用的
2012-07-04 23:13 0自己用的自己用的自己用的自己用的自己用的自己用的自己用的自己用 ... -
给严雨熙的
2012-04-06 19:14 0直接下载即可,里面都是面试的资料,,,你详细看下 过面试应该 ... -
简历自己用的
2012-04-02 22:50 0自己用的简历 保存下 -
RCP
2012-03-13 22:40 0自己用下RCP -
自己用的
2011-06-22 07:25 727大方说的师傅是打发士大夫似的发射打发士大夫似的 -
4444444444
2011-05-10 23:38 0sssssssssssssssssssssssssssssss ... -
bbbbbbbbbbbbssssssssssssss
2011-02-26 18:52 0bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb ... -
zjsssssssss
2010-12-06 23:42 0package com.game.main; import ... -
在db2和oracle中的对树的递归查询语句
2010-07-05 21:36 1179在db2和oracle中的对树的递归查询语句。 表结构: ... -
做的图片
2010-06-28 21:51 0看附件,只是给自己看下而已,不准备发布的 -
form.submit()对象不支持此属性或方法
2010-06-03 19:00 0原因:因为有一个submit按钮名字叫submit < ... -
tiles1与tiles2的区别
2010-05-05 15:14 14521.引入的包不同 主要是三个JAR包tiles-api,til ... -
使用Tiles总结
2010-05-05 14:55 1215正确使用tiles2包括4个步骤: 1.加入包文件 2.配置文 ... -
tomcat启动中项目的访问时间无限延长
2009-01-08 09:03 1716前天在tomcat中部署了2个项目,Eric_Mana ... -
Quartz --实现由时间触发的事件任务
2008-12-25 14:33 1433配置Cron触发器 <bean id=" ... -
线程变量的保存
2008-12-22 14:22 1935在一次http会话中,线程内变量的存储依赖于HttpS ...
相关推荐
dragresize 可让用户调整页面DIV的大小和位置 dragresize 可让用户调整页面DIV的大小和位置
vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class=...
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
页面上可以任意拖动DIV,js实现的,推荐一下
Vue可拖动的div 说明 vue可拖拽可伸缩的组件,目前只是上方,详见以下传送门 安装 npm install vue-draggable-div 使用 [removed] import VueDraggableDiv from 'vue-draggable-div' ... components: {...
div拖动在页面中随意拖动div拖动在页面中随意拖动div拖动在页面中随意拖动div拖动在页面中随意拖动div拖动在页面中随意拖动div拖动在页面中随意拖动div拖动在页面中随意拖动
div+css设计的弹出层,实现弹出层随鼠标的点击拖拽,可以在窗体内随意移动。
利用js脚本实现在页面拖动窗口的效果,类似于在windows平台的拖动窗口,效果可嘉,不妨一试。
1、html 拖动div进行相应顺序的排序,亲测可用,简单方便 2、适用于各大场景,通过相应的js拖动来执行相应的方法 3、可以下载应用,不懂的可以一起探讨
可以实现div在页面中随意拖动
此文档书写规范。主要是利用javaScript在页面控制弹出一个可以任意拖动的DIV层。
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至:maxcoold@126.com --------------------------------------------- 功能说明: 本插件基于jquery 1.31下编写,请尽量在...
上下左右分割div,并且可以自由拖动,实现页面上下左右分栏
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
这是一个使用div布局页面,并实现div高度可以拖动的demo例子,使用jQuery框架,实现了火狐和IE的兼容性
页面拖动简单例子,asp.NET能用,可以从后台拼动态代码,能满足基本需求
DIV可固定到页面的固定位置,不随页面的滚动而变化,还可以拖动DIV重新固定位置
主要介绍了JS实现网页Div层Clone拖拽效果,涉及JavaScript响应鼠标事件动态改变页面元素位置属性及层级属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下