新写的一个CSS-Tabs

程序说明
  • 程序特点
    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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.