標簽歸檔:Tabs

新寫的一個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.okfdzs1809.com/">苗啟源 Home</li>
		<li title="http://www.haoniux.cn/">好牛X</li>
	</ul>
	<iframe src="about:blank" name="xto"></iframe>
</div>

我的阿里UED答題

不喜歡用別人寫的框架,所以沒用框架,全是自己寫的代碼~

本來想一張慣例把代碼全發出來,想了想還是只發部分代碼了,畢竟這是”考試”。

瀏覽器兼容:火狐,IE7,IE6,IE5.5,IE5,Opera9.25,Safari3.0.5顯示正常

CSS用的絕對定位,Body區域中DIV只有Class,這我寫過的最簡潔的~
腳本只用一個document.onmouseover=function(e)加載,然后根據className來決定是否放大該層

演示地址:http://www.okfdzs1809.com/products/wo-aliued.html
注:源程序支持火狐,IE7,IE6,IE5.5,IE5,Opera9.25,Safari3.0.5并測試正常,通過W3C校驗,但因程序代碼用了加密,服務器端程序(http://www.okfdzs1809.com/products/wo-aliued.asp
)不能讀取Firefox的來路信息,所以請用IE測試~

2
3
4
5
6
<body>
<div class="mqycn001"></div>
<div class="mqycn002"></div>
<div class="mqycn003"></div>
</body>
1
2
3
4
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代碼*/
1
2
3
4
5
document.onmouseover=function(e){
	e = window.event || e;
	var o = e.srcElement || e.target;
/*省略部分JavaScript代碼*/
}