程序员人生网站导航

JavaScript 选项卡效果(标记当前)

栏目：jscript时间：2014-04-14 17:43:40

　　网(LieHuo.Net)教程早先写过一篇文章说标记当前，和选项卡，几乎是目前所有常见网页效果应用的本质，其实选项卡也是一种形式的标记当前，只不过这种标记是标记的显示状态罢了。

　　今天我们用JS的方法写一下这些常用的函数，使它们使用起来更加方便：
　　标记当前 function cur(ele,cls){} 接受两个函数一个是ele 要标记的元素或者一个选择符，cls是标记的类名一个css class 默认为"cur";
　　选项卡 function tab(idtab,tagtab,idcon,tagcon,act,cls,idx){} 接受的参数比较多
　　idtab:控制触发选项卡的容器
　　idtag:控制触发选项卡的标签
　　idcon:被控制的内容容器idtag:被控制的内容标签act: 触发方式默认为 onclick
　　cls:标记当前的css class 默认为 “cur”
　　idx:默认显示第几项默认为0 首项

　　函数如下：

以下为引用的内容：
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");
//

　　来自：http://www.cnblogs.com/trance/

------分隔线----------------------------

上一篇 当前域的 JavaScript 条件判断

下一篇 只有占领用户桌面才是掌握流量的霸王

------分隔线----------------------------