Tabs | 启源的部落格

程序说明
程序特点当鼠标移过时只能分析是否在加载，当加载时移动事件失效。防止用户还没有看完加载的数据而转页。增加了点击事件,当用户确定本页内容无可用信息时，点击程序不判读是否自动加载而直接转页,也可点击[x]关闭Loading。支持多浏览器:IE7,IE6,IE5.5,IE5,FireFox2.0,Safari3.05,Opera(因本人美工有限Safari,Opera显示不是很理想，不过程序没有问题) 运行原理通过_Load(_L)以兼容的方式加载主函数_L() 主函数_L()用_G获取页面中LI,当页面加载完成后，给LI增加onmouseover事件,再给LI增加onclick事件。 onclick:判断LI是否存在title，如果不存在则退出；存在则定义LI的onclick事件为把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕 onmouseover:判断是否在加载中，加载中则退出；不在加载中则把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕增加事件完毕，隐藏Loading 主要函数 _Load(f):在页面加载完成后运行函数f _G(o,t,p):返回p对象中ID(TagName,Name)为o的对象

程序说明

程序特点
1. 当鼠标移过时只能分析是否在加载，当加载时移动事件失效。防止用户还没有看完加载的数据而转页。
2. 增加了点击事件,当用户确定本页内容无可用信息时，点击程序不判读是否自动加载而直接转页,也可点击[x]关闭Loading。
3. 支持多浏览器:IE7,IE6,IE5.5,IE5,FireFox2.0,Safari3.05,Opera(因本人美工有限Safari,Opera显示不是很理想，不过程序没有问题)
运行原理
1. 通过_Load(_L)以兼容的方式加载主函数_L()
2. 主函数_L()用_G获取页面中LI,当页面加载完成后，给LI增加onmouseover事件,再给LI增加onclick事件。
3. onclick:判断LI是否存在title，如果不存在则退出；存在则定义LI的onclick事件为把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
4. onmouseover:判断是否在加载中，加载中则退出；不在加载中则把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
5. 增加事件完毕，隐藏Loading
主要函数
1. _Load(f):在页面加载完成后运行函数f
2. _G(o,t,p):返回p对象中ID(TagName,Name)为o的对象

body{background:#FFF;margin:0px;padding:0px;font-size:14px;}
	div{padding:0px;width:50%;background:#000;float:right;height:100%}
	div	ul{overflow:hidden;list-style:none;padding:4px 2px 0px 2px;margin:20px 20px 0px 20px;background:#aaa;height:29px;width:92%;*width:100%}
	div	ul	li{padding:5px 8px;background:#eee;float:left;margin-left:4px;margin-top:2px;color:#666}
			.cu{font-size:18px;background:#fff;color:#000;border:#ccc solid 2px;border-bottom:none;margin-top:-4px;*margin-top:-5px;height:21px;}
			#lo{z-index:100;background:#ff0;float:right;margin-top:-4px;margin-right:-2px;color:#f00;height:16px;padding:2px;}
			#lo span{color:#000;}
			#lo strong{text-decoration:underline;}
		iframe{padding:0px 2px;margin:0px 20px 20px 20px;background:#fff;border:none;width:92%;*width:100%;height:88%}
	table{width:48%;height:93%;*height:94%;background:#000;margin:2% 1%;padding:0px;border:none;}
		th,.ti{font-size:18px;background:#ccc;padding:4px 0px 0px 0px;height:22px;text-align:center;color:#000}
		td{color:#fff;font-size:14px;background:#666}
		td	ul{margin-right:30px;list-style:none;margin-left:20px;padding:0px;}
		td 	li	strong{padding:0px 0px 0px 20px;font-size:20px;}

var _class;
function _Load(f){
	_class=window.ActiveXObject?"className":"class";
	window.onload=typeof window.onload != "function"?f:function(){f();}
}
function _G(o,t,p){
	if(!p)
		p=document;
	switch(t){
		case "name":return p.getElementsByName(o);
		case "tagname":return p.getElementsByTagName(o);
		default:return p.getElementById(o);
	}
}
function _L(){
	var x=_G("li","tagname",_G("div","tagname")[0]);
	for(i=0;i<x .length;i++){
		x[i].onmouseover=function(){
			this.onclick=function(){
				if(this.getAttribute("title")){
					for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
					this.setAttribute(_class,"cu");
					_G("lo").style.display="block";
					_G("xto","name")[0].src=this.getAttribute("title");
					_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
				}
			}
			if(_G("lo").style.display=="none"&&this.getAttribute(_class)!="cu"){
				for(j=0;j<x.length;j++){x[j].setAttribute(_class,"no")}
				this.setAttribute(_class,"cu");
				_G("lo").style.display="block";
				_G("xto","name")[0].src=this.getAttribute("title");
				_G("xto","name")[0].onload=function(){_G("lo").style.display="none";}
			}
		}
	}
	_G("span","tagname",_G("lo"))[0].onmouseover=function(){
		this.onclick=function(){
			_G("lo").style.display="none";
		}
	}
	_G("lo").style.display="none";
}
_Load(_L);
//-->
</x>

<div>
	<ul>
		<li id="lo">Loading...<span title="解除锁定">[<strong>x</strong>]</span></li>
		<li class="cu" title="#">空白页</li>
		<li title="http://www.wxcmnet.cn/">无限CMNET</li>
		<li title="http://www.miaoqiyuan.cn/">苗启源 Home</li>
		<li title="http://www.haoniux.cn/">好牛X</li>
	</ul>
	<iframe src="about:blank" name="xto"></iframe>
</div>

不喜欢用别人写的框架，所以没用框架，全是自己写的代码~

本来想一张惯例把代码全发出来，想了想还是只发部分代码了，毕竟这是”考试”。

浏览器兼容：火狐，IE7，IE6，IE5.5，IE5，Opera9.25，Safari3.0.5显示正常

CSS用的绝对定位，Body区域中DIV只有Class，这我写过的最简洁的~
脚本只用一个document.onmouseover=function(e)加载，然后根据className来决定是否放大该层

演示地址:http://www.miaoqiyuan.cn/products/wo-aliued.html
注:源程序支持火狐，IE7，IE6，IE5.5，IE5，Opera9.25，Safari3.0.5并测试正常，通过W3C校验，但因程序代码用了加密，服务器端程序(http://www.miaoqiyuan.cn/products/wo-aliued.asp
)不能读取Firefox的来路信息，所以请用IE测试~

<body>
<div class="mqycn001"></div>
<div class="mqycn002"></div>
<div class="mqycn003"></div>
</body>

body div{position:absolute;background:#66F}
.mqycn001 {left:20px;top:20px;width:300px;height:200px;}
.mqycn001_0 {left:19px;top:19px;width:375px;height:250px;}
/*省略部分CSS代码*/

document.onmouseover=function(e){
	e = window.event || e;
	var o = e.srcElement || e.target;
/*省略部分JavaScript代码*/
}

启源的部落格

苗启源 – 成长中的全栈开发者

标签归档：Tabs

新写的一个CSS-Tabs