软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > JavaScript 选项卡效果(标记当前)

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

  烈火网(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/

    相关阅读
    栏目导航
    推荐软件