页面技术---js拖拽和DIV的层控制
一直想学习下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即可运行查看效果