網(wǎng)(LieHuo.Net)教程 早先寫(xiě)過(guò)一篇文章說(shuō) 標(biāo)記當(dāng)前，和選項(xiàng)卡，幾乎是目前所有常見(jiàn)網(wǎng)頁(yè)效果應(yīng)用的本質(zhì)，其實(shí) 選項(xiàng)卡也是一種形式的標(biāo)記當(dāng)前，只不過(guò)這種標(biāo)記是標(biāo)記的顯示狀態(tài)罷了。
今天我們用JS的方法寫(xiě)一下這些常用的函數(shù)，使它們使用起來(lái)更加方便：
標(biāo)記當(dāng)前 function cur(ele,cls){} 接受兩個(gè)函數(shù) 一個(gè)是ele 要標(biāo)記的元素 或者 一個(gè)選擇符，cls是標(biāo)記的類(lèi)名 一個(gè)css class 默認(rèn)為"cur";
選項(xiàng)卡 function tab(idtab,tagtab,idcon,tagcon,act,cls,idx){} 接受的參數(shù)比較多
idtab:控制觸發(fā)選項(xiàng)卡的容器
idtag:控制觸發(fā)選項(xiàng)卡的標(biāo)簽
idcon:被控制的內(nèi)容容器idtag:被控制的內(nèi)容標(biāo)簽act: 觸發(fā)方式 默認(rèn)為 onclick
cls:標(biāo)記當(dāng)前的css class 默認(rèn)為 “cur”
idx:默認(rèn)顯示第幾項(xiàng) 默認(rèn)為0 首項(xiàng)
函數(shù)如下：
| 以下為引用的內(nèi)容： function cur(ele,cls){ return new cur.prototype.init(ele,cls); } cur.prototype={ init:function(ele,cls){ this.idx=0; this.mark= cls? " "+cls:"cur"; this.ele= typeof ele=="object"? ele:document.getElementById(ele); this.hdlr.call(this); return this.idx; }, hdlr:function(){ this.addCls(); this.rmvCls(); }, addCls:function(){ this.ele.className+=this.mark; }, rmvCls:function(){ var itm=this.ele; var prn=itm.parentNode; var itms=prn.getElementsByTagName(itm.nodeName); for(i=0; i<itms.length; i++){ if(itms[i]!==itm){ itms[i].className=itms[i].className.replace(this.mark,""); }else{ this.idx=i; } } } } cur.prototype.init.prototype=cur.prototype; function tab(idtab,tagtab,idcon,tagcon,act,cls,idx){ return new tab.prototype.init(idtab,tagtab,idcon,tagcon,act,cls,idx); } tab.prototype={ init:function(idtab,tagtab,idcon,tagcon,act,cls,idx){ this.tabid=document.getElementById(idtab); this.tabtag=this.tabid.getElementsByTagName(tagtab); this.conid=document.getElementById(idcon); this.contag=this.conid.getElementsByTagName(tagcon); this.cls=cls || "cur"; this.act=act || "onclick"; this.idx=idx || 0; this.hdlr.call(this); }, hdlr:function(){ this.change.call(this); for(var i=0; i<this.tabtag.length; i++){ var othis=this; (function(){ var ii=i; othis.tabtag[ii][othis.act]=function(){ if(!this.className.match(othis.cls)){ othis.idx= ii; othis.change.call(othis); } } })() } }, hide:function(){ this.style.display="none"; }, show:function(){ this.style.display=""; }, change:function(){ cur(this.tabtag[this.idx]); for(var i=0; i<this.contag.length; i++){ if(i!==this.idx){ this.hide.call(this.contag[i]); }else{ this.show.call(this.contag[i]); } } } } tab.prototype.init.prototype=tab.prototype; //使用范例： tab("comtab","li","comcon","div","onmouseover",0,2); tab("comtab2","li","comcon2","div"); // |
來(lái)自：http://www.cnblogs.com/trance/
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
