標簽歸檔: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(