简单的常用效果的一个js

作者:cmscn 日期:2008-12-27

字体大小: 小中大

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>常用工具类</title>
<style type="text/css">

</style>
<script type="text/javascript">
function CommonTool(){
	this.value = 0;
	this.$ = function(o){
		if(typeof(o) == "string"){
			if(document.getElementById(o)){
				return document.getElementById(o);
			}else{
				alert("id : " + o + " have not found");
				return false;
			}
		}else{
			return o;
		}
	};
	this.sd = function(menus,divs,openClass,closeClass){// two class
		var _this = this;
		if(divs != null){
			if(menus.length != divs.length)
			{
				alert("菜单层数量和内容层数量不一样!");
				return false;
			}
		}					
		for(var i = 0 ; i < menus.length ; i++)
		{	
			_this.$(menus[i]).flag = ++this.value;
			_this.$(menus[i]).value = i;
			_this.$(menus[i]).onclick = function(){										
				for(var j = 0 ; j < menus.length ; j++)
				{						
					_this.$(menus[j]).className = closeClass;
					if(divs!=null){
						_this.$(divs[j]).style.display = "none";	
					}									
				}				
				_this.$(menus[this.value]).className = openClass;
				if(divs!=null){	
					_this.$(divs[this.value]).style.display = "block";	
				}			
			}
		}
	};
	this.sd3class = function(menus,divs,openClass,closeClass,middleClass){ //three class
		var _this = this;
		for(var x = 0 ; x < menus.length ; x++)
		{
			_this.$(menus[x]).state = _this.$(menus[x]).className == openClass ?  "open" : "close";
		}
		if(menus.length != divs.length)
		{
			alert("菜单层数量和内容层数量不一样!");
			return false;
		}				
		for(var i = 0 ; i < menus.length ; i++)
		{	
			_this.$(menus[i]).flag = ++this.value;
			_this.$(menus[i]).value = i;
			_this.$(menus[i]).onclick = function(){		
				
				for(var j = 0 ; j < menus.length ; j++)
				{
					_this.$(menus[j]).className = closeClass;
					_this.$(divs[j]).style.display = "none";
					_this.$(menus[j]).state = "close";
				}
				this.state = "open";
				_this.$(menus[this.value]).className = openClass;
				_this.$(divs[this.value]).style.display = "block";				
			}
			_this.$(menus[i]).onmouseover = function(){
				//alert(this.state);
				for(var j = 0 ; j < menus.length ; j++)
				{					
					
					if(_this.$(menus[j]).state != "open")
					{
						_this.$(menus[j]).className = closeClass;						
						_this.$(menus[j]).state = "close";
					}					
				}
				if(this.state == "open")
				{
				}
				else
				{
					this.className = middleClass;
				}				
			}
			_this.$(menus[i]).onmouseout = function(){
				if(this.state != "open")
				{
					this.className = closeClass;
				}
			}
		}
	};
	this.getCurrentDateTime = function(o,format){
		var d = new Date();
		var yy = document.all ? d.getYear() : (d.getYear() + 1900);	
		var mm = d.getMonth() + 1 ;	
		mm = mm<10 ? ("0"+mm) : mm;	
		var dd = d.getDate();	
		dd = dd<10 ? ("0"+dd) : dd;	
		var hh = d.getHours();	
		hh = hh<10 ? ("0"+hh) : hh;	
		var mi = d.getMinutes();	
		mi = mi<10 ? ("0"+mi) : mi;	
		var ss = d.getSeconds();	
		ss = ss<10 ? ("0"+ss) : ss;	
		var w = d.getDay();
		var ww = 0 ;	
		switch(w){		
			case 1 : ww = "星期一" ; break;
			case 2 : ww = "星期二" ; break;
			case 3 : ww = "星期三" ; break;
			case 4 : ww = "星期四" ; break;
			case 5 : ww = "星期五" ; break;
			case 6 : ww = "星期六" ; break;
			case 0 : ww = "星期日" ; break;		
		}
		//var dateStr = yy + "-" + mm + "-" + dd + "  " + hh + ":" + mi + ":" + ss + " " + ww;
		var dateStr = format.replace("yyyy",yy);
		dateStr = dateStr.replace("mm",mm);
		dateStr = dateStr.replace("dd",dd);
		dateStr = dateStr.replace("hh",hh);
		dateStr = dateStr.replace("mi",mi);
		dateStr = dateStr.replace("ss",ss);
		dateStr = dateStr.replace("ww",ww);
		
		if(this.$(o).type == "text"){
			this.$(o).value = dateStr;
		}else{
			this.$(o).innerHTML = dateStr;
		}		
	};
	this.addOpt = function(o1,o2){	//rule control
		var s1 = this.$(o1);
		var s2 = this.$(o2);
		var opt = s1.getElementsByTagName("option");	
		var optL = opt.length;	
		var count = 0;
		for( var i = 0 ; i < optL ; i++){
			if(opt[count].selected == true){			
				s2.appendChild(opt[count]);		
				count--;
			}
			count++;
		}	
	}
	this.openTree=function(id){ // control tree menu
	/*
		structure:
	
		ul(root)
		|-li    (<a href="#">innerHTML</a>)
		| |-ul
		|   |-li
		|	|-li
		|-li
		| |-ul
		|   |-li
		|	|-li
		|-li (innerHTMl)	
	*/	
		var treeP = this.$(id);
		//alert(treeP.id);
		var alink = treeP.getElementsByTagName("a");			
		var cUls = treeP.getElementsByTagName("ul");	
		//alert(cUls.length);
		for(var i = 0 ; i < cUls.length ; i++){		
			cUls[i].style.display = "none";
		}	
		for(var j = 0 ; j < alink.length ; j++){	
			alink[j].onclick = function(){							
				this.parentNode.getElementsByTagName("ul")[0].style.display =  (this.parentNode.getElementsByTagName("ul")[0].style.display == "none") ? "block" : "none";
				return false;
			}
		}	
	}
}
window.onload = function(){
	var ctl = new CommonTool();
	ctl.sd(["sd_menu01","sd_menu02","sd_menu03","sd_menu04","sd_menu05"],["sd_content01","sd_content02","sd_content03","sd_content04","sd_content05"],"hover","");
	ctl.sd3class(["sd_menu011","sd_menu022","sd_menu033","sd_menu044","sd_menu055"],["sd_content011","sd_content022","sd_content033","sd_content044","sd_content055"],"hover","","hover2");
	ctl.getCurrentDateTime("getCurrentDate","yyyy-mm-dd hh:mi:ss ww");
	ctl.getCurrentDateTime("getCurrentDate2","hh:mi:ss yyyy/mm/dd (ww)");
	ctl.$("addOptBton1").onclick = function(){ctl.addOpt("addOpt1","addOpt2")};
	ctl.$("addOptBton2").onclick = function(){ctl.addOpt("addOpt2","addOpt1")};
	ctl.openTree("openTrees");	
}
</script>
</head>
<body>
<div class="bodyer">
	<h1 class="t_rt">
		常用工具类
	</h1>
	
	<h2>
		sd(选项卡1) <a href="#p_sd" name="sd">查看API</a>
	</h2>
	
    <div class="preview">
		<ul id="sd_menu">
			<li id="sd_menu01" class="hover">菜单一</li>
			<li id="sd_menu02">菜单二</li>
			<li id="sd_menu03">菜单三</li>
			<li id="sd_menu04">菜单四</li>
			<li id="sd_menu05">菜单五</li>
		</ul>
		<div class="cls"></div>
		<div class="sd_content s" id="sd_content01">内容一</div>
		<div class="sd_content h" id="sd_content02">内容二</div>
		<div class="sd_content h" id="sd_content03">内容三</div>
		<div class="sd_content h" id="sd_content04">内容四</div>
		<div class="sd_content h" id="sd_content05">内容五</div>
	</div>
	
	<h2>
		sd(选项卡2) <a href="#p_sd3class" name="sd3class">查看API</a>
	</h2>
	
    <div class="preview">
		<ul id="sd_menu">
			<li id="sd_menu011" class="hover">菜单一</li>
			<li id="sd_menu022">菜单二</li>
			<li id="sd_menu033">菜单三</li>
			<li id="sd_menu044">菜单四</li>
			<li id="sd_menu055">菜单五</li>
		</ul>
		<div class="cls"></div>
		<div class="sd_content s" id="sd_content011">内容一</div>
		<div class="sd_content h" id="sd_content022">内容二</div>
		<div class="sd_content h" id="sd_content033">内容三</div>
		<div class="sd_content h" id="sd_content044">内容四</div>
		<div class="sd_content h" id="sd_content055">内容五</div>
	</div>	
	
	<h2>
		getCurrentDateTime(获取时间) <a href="#p_getCurrentDateTime" name="getCurrentDateTime">查看API</a>
	</h2>
	<div class="preview">
		<span id="getCurrentDate"></span> 
		<input type="text" id="getCurrentDate2" size="50"/>
	</div>
	
	<h2>
		addOpt(选择框交换选项) <a href="#p_addOpt" name="addOpt">查看API</a>
	</h2>
	<div class="preview">
	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="45%" align="right">
			<select name="select2" size="8" multiple="multiple" id="addOpt1">
              <option>opt1a</option>
              <option>opt2a</option>
              <option>opt3a</option>
              <option>opt4a</option>
            </select></td>
            <td width="8%" align="center"><input name="button" type="button" id="addOptBton1" value="->" />

<input name="button2" type="button"  id="addOptBton2" value="<-"/></td>
            <td width="47%" align="left">
			<select name="select" size="8" multiple="multiple" id="addOpt2">
              <option>opt1b</option>
              <option>opt2b</option>
              <option>opt3b</option>
              <option>opt4b</option>
            </select></td>
          </tr>
        </table>
	</div>
	
	
	<h2>
		openTree(树结点) <a href="#p_openTree" name="openTree">查看API</a>
	</h2>
	<div class="preview">
		<ul id="openTrees" class="treeUl">
								<li><a href="#">根节点</a>
									<ul>
										<li><a href="#">节点 1</a>
										<ul>
											<li>节点 11</li>
											<li>节点 12</li>
											<li>节点 13</li>
											<li>节点 14</li>
										</ul>
									</li>
									<li><a href="#">节点 2</a>
										<ul>
											<li><a href="#">节点 21</a>
												<ul>
													<li>节点 211</li>
													<li>节点 212</li>
													<li>节点 213</li>
													<li>节点 214</li>
												</ul>
											</li>
											<li>节点 22</li>
											<li>节点 23</li>
											<li>节点 24</li>
										</ul>
									</li>
									<li><a href="#">节点 3</a>
										<ul>
											<li>节点 31</li>
											<li>节点 32</li>
											<li>节点 33</li>
											<li>节点 34</li>
										</ul>
									</li>
									</ul>
								</li>
	  </ul>
	</div>
	<h2>
		源代码
	</h2>
	
	<div class="textDiv">		
	</div>
	
	<h2>
		API
	</h2>
	
  <div class="preview">
		sd(o)：获取对象函数 
		<hr/>
		功能：获取id为o的对象,如果o是对象则返回.

参数说明：o - 对象的id(string)

例子：

<div class="example">var obj = new CommonTool().$("id");</div>			
  </div>		
   <div class="preview">	
		sd(menus,divs,openClass,closeClass)<a href="#sd" name="#p_sd">(预览)</a>：选项卡  
		(菜单2种状态)  
		<hr/>
		功能：获取id为o的对象,如果o是对象则返回.

参数说明：menus - 菜单id数组(Array),divs - 现实内容层的id数组(Array) 
		,openClass
	- 鼠标经过时候菜单的class , closeClass - 鼠标移动出菜单时候菜单的class

例子：
<div class="example">new CommonTool().sd(["sd_menu01","sd_menu02","sd_menu03","sd_menu04","sd_menu05"] ,["sd_content01","sd_content02","sd_content03","sd_content04","sd_content05"],"hover","");</div>	
  </div>
		
		<div class="preview">
			sd3class(menus,divs,openClass,closeClass,middleClass)<a href="#sd3class"  name="#p_sd3class">(预览)</a>：选项卡(菜单3种状态)  
			<hr/>
			功能：获取id为o的对象,如果o是对象则返回.

参数说明：menus - 菜单id数组(Array),divs - 现实内容层的id数组(Array) 
			,openClass
		- 鼠标经过时候菜单的class , closeClass - 鼠标移动出菜单时候菜单的class  , middleClass - 鼠标经过菜单的时候菜单的class

例子：
	<div class="example">new CommonTool().sd3class(["sd_menu011","sd_menu022","sd_menu033","sd_menu044","sd_menu055"], ["sd_content011","sd_content022","sd_content033","sd_content044","sd_content055"],"hover","","hover2");</div>	
			
	  </div>
  
  	  <div class="preview">
			getCurrentDateTime(o,format)<a href="#getCurrentDateTime" name="#p_getCurrentDateTime">(预览)</a>：获取系统时间
			<hr/>
			功能：获取系统时间,按照格式format(String)输出,并设置在id为o(String)

参数说明：o - 对象的id(string) , format - 输出时间的格式(yyyy-mm-dd hh:mi:ss ww) yyyy:年 mm:月 dd:日 hh:小时 mi:分钟 ss:秒 ww:星期

例子：
	<div class="example">
		new CommonTool().getCurrentDateTime("getCurrentDate","yyyy-mm-dd hh:mi:ss ww");

new CommonTool().getCurrentDateTime("getCurrentDate","hh:mi:ss yyyy/mm/dd (ww)");</div>	
			
  </div>
	  
	  <div class="preview">
			addOpt(o1,o2)<a href="#addOpt" name="#p_addOpt">(预览)</a>：两个选择框选项互换  
			<hr/>
			功能：把一个下拉菜单(o1)中选中的选项添加到另一个下拉菜单(o2)中

参数说明：o1-原下拉菜单的id(String) o2-目标下拉菜单id(String)

例子：
	<div class="example">
		ctl.addOpt("addOpt2","addOpt1")</div>	
			
	  </div>
	
	  <div class="preview">
			openTree(o)<a href="#openTree"  name="#p_openTree">(预览)</a>：树结点  
			<hr/>
			功能：打开/关闭 树结点

参数说明：o1树结点的根元素

说明：<br />
	结构：

提供一个根节点的css(使得树结点有所进)padding-left:20px;line-height:20px;
	例子：
	<div class="example">
		ctl.openTree("tree01");</div>	
			
	  </div>
	  <h2>
		使用方法
	  </h2>
	  <div class="preview">
			把代码中的代码引入js中，引用到页面中，用 var ctl =  new CommonTool() 创建一个对象 ctl 之后利用以上的api就可以完成以上实现的各种效果 例如：
			<div class="example">window.onload = function(){<br />
var ctl = new CommonTool();//创建一个对象<br />
ctl.sd(["sd_menu01","sd_menu02","sd_menu03","sd_menu04","sd_menu05"] , ["sd_content01","sd_content02","sd_content03","sd_content04","sd_content05"], "hover","");//选项卡<br />
ctl.sd3class(["sd_menu011","sd_menu022","sd_menu033","sd_menu044","sd_menu055"] , ["sd_content011","sd_content022","sd_content033","sd_content044","sd_content055"],"hover","","hover2");//选项卡<br />
ctl.getCurrentDateTime("getCurrentDate","yyyy-mm-dd hh:mi:ss ww");//获取系统时间<br />
ctl.getCurrentDateTime("getCurrentDate2","hh:mi:ss yyyy/mm/dd (ww)");//获取系统时间<br />
ctl.$("addOptBton1").onclick = function(){ctl.addOpt("addOpt1","addOpt2")};//下拉菜单选项互换<br />
ctl.$("addOptBton2").onclick = function(){ctl.addOpt("addOpt2","addOpt1")};//下拉菜单选项互换<br />
ctl.openTree("openTrees"); //树结点<br />
}</div>	
	  </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

点击下载此文件

点击下载此文件

http://bbs.blueidea.com/thread-2904381-1-2.html

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

相关日志:

评论: 0 | 引用: 0 | 查看次数: 552

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 20 字 \| UBB代码关闭 \| [img]标签关闭

简单的常用效果的一个js

作者:cmscn 日期:2008-12-27

feed

User Panel

Archive

Search