`
flysky7931
  • 浏览: 43676 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

页面技术---js拖拽和DIV的层控制

    博客分类:
  • J2EE
阅读更多
   一直想学习下J2EE中页面部分的相关技术,可是手头项目一直比较忙,所以没有去怎么样就,最近突然变得有空闲了,于是便自己做了个关于js拖拽和DIV的层控制,现在将代码贴上,请读者们多多指教:
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>&nbsp;
								  <A title=设置 href="javascript:_edit(13);"><IMG src="images/pencil.png"></A>&nbsp;
								  <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>&nbsp;
								  <A title=设置 href="javascript:_edit(14);"><IMG src="images/pencil.png"></A>&nbsp;
								  <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>&nbsp;
									<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>&nbsp;&nbsp;显示的行数:<INPUT class=SmallInput id=display_lines size=5 value=5></DIV>
			<DIV>&nbsp;&nbsp;<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>&nbsp;&nbsp;左侧栏目宽度:<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=确定>&nbsp;&nbsp;
			<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了

相关推荐

Global site tag (gtag.js) - Google Analytics