当前位置： 代码迷 >> Web前端 >> 基于OO的tab选项卡，增强了语言话和扩展性需特效可合并前面的附加插件用
  详细解决方案

基于OO的tab选项卡，增强了语言话和扩展性需特效可合并前面的附加插件用

热度：217   发布时间：2012-10-21 09:00:07.0
基于OO的tab选项卡，加强了语言话和扩展性需特效可合并前面的附加插件用

前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有高手能帮忙指点下我的写不足和错误，一直以来自己写的东西都是在用，性能方面个人只能尽量靠近问题还很多……真心求指点；

插件简介：用于tab选项卡，这个东西网上也很多不过网上的普遍都是ul然后内容是div个人感觉这样的结构不便于语义化，而且当没有js和css 的时候整个页面就无可读性，所以重写的一个大家可以看看

使用方法：在下面的js代码里面前面写了，大家可以看看直接复制粘贴就可以用了有问题可以联系我

JS代码如下，这js代码里面有个查找class的，其实这个东西我之所以没合并进去因为查找class的本身就应该单独做个类是用，demo事例在下面

/**
 //class查找
function _class(c,o){
    var oDom = o?o:document,cParent = oDom.getElementsByTagName("*"),classAry = [],leng = cParent.length;
    while(leng--){
        var allC = cParent[leng].className,word = allC.split(" "),len=word.length;
        while(len--) word[len]==c&&classAry.push(cParent[leng])
    }
    return classAry.length==1?classAry[0]:classAry;
}
/**
 * User: liuxing
 * Date: 12-9-22
 * Time: 下午2:02
 * 用途：用于tab选项卡切换
 * 用法：传入一个对象，对象包含5个默认参数，
 * 第一个为：element tab触发的节点此参数为数组，第一个为需要查找的class类，第二个这个class类的查找范围ID
 * 第二个为：childTag 切换内容的子类容标签
 * 第三个为：parentTag 触发tab的节点
 * 第四个为：evenSort 触发事件的方式
 * 第五个为：curClass 给当前元素添加的当前类名
 */
function Tab(){this.init.apply(this,arguments);}
Tab.prototype = {
    init:function(o){
        if(Object.prototype.toString.apply(o)!=='[object Object]') return;
        this.set(o);
        var e = this.s.element,len = e.length;
        if(len>0){
            var tabArea = _class(e[0],e[1]);
            var leng = tabArea.length
            do{this.even(tabArea[leng]||tabArea)}while(leng--);
        }
    },
    set:function(o){
        this.s = {
            element:null,
            childTag:"dd",
            parentTag:"dt",
            evenSort:"mouseover",
            curClass:"cur"
        }
        for(var c in o) this.s[c] = o[c];
    },
    even:function(source){
        var _this = this;
        if(source.attachEvent){
            source.attachEvent("on"+this.s.evenSort,function(even){_this.fun(source,even)})
        }else if(source.addEventListener){
            source.addEventListener(this.s.evenSort,function(even){_this.fun(this,even)},false)
        }
    },
    fun:function(self,even){
        var e = even || window.event,target = e.target || e.srcElement,tagName,chidArea;
        while(target!=self&&tagName!=this.s.parentTag){
            tagName = target.nodeName.toLowerCase();
            tagName!=this.s.parentTag&&(target = target.parentNode);
        }
        if(tagName==this.s.parentTag){
            chidArea = self.getElementsByTagName(this.s.childTag);
            var j= 0,leng = chidArea.length,allEle = self.getElementsByTagName(target.nodeName),curIndex = this.getIndex(target,allEle);
            if(allEle.length!==leng) return;
            if(target.className.indexOf(this.s.curClass)<0){
                for(;j<leng;j++) curIndex===j?(target.className+=" "+this.s.curClass,chidArea[j].style.display="block"):(allEle[j].className=allEle[j].className.replace(this.s.curClass,""),chidArea[j].style.display="none");
            }
        }
    },
    getIndex:function(o,a){
        var len = a.length,i=0;
        for(;i<len;i++) if(o===a[i]) return i;
    }
}

html demo如下：

<!DOCTYPE html>
<html>
<head>
    <title>TAB选项卡示例</title>
    <style>
        dl,dt,dd{padding:0;margin:0;font:12px/1.3 'tahoma,geneva,sans-serif';}
        a:link,a:visited{text-decoration:none}
        .tab-bx{overflow:hidden;zoom:1;position:relative;padding-bottom:268px;width:333px}
        .tab-bx dt{position:relative;z-index:10;float:right;display:inline;height:32px;font:14px/32px 'Microsoft YaHei';color:#4d0101;padding:0 5px;cursor:pointer;}
        .tab-bx dt.cur{border:1px solid #882220;border-bottom:none;background-color:#770301;color:#ebd39d;}
        .tab-bx dd{display:none;position:absolute;left:0;top:32px;z-index:5;border:1px solid #882220;background:#4d0101;padding:14px 15px 5px;width:301px;}
        .tab-bx dd a{display:inline;float:left;width:60px;height:25px;line-height:25px;text-align:center;color:#d04343;margin-bottom:6px;overflow:hidden;}
        .tab-bx dd .cur{background-position:-104px -91px;}
    </style>
</head>
<body>
<dl class="tab-bx">
    <dt>预告</dt>
    <dd>
        <a href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
        <a href="#">第13集</a>
        <a href="#">第14集</a>
        <a href="#">第15集</a>
        <a href="#">第16集</a>
    </dd>
    <dt>花絮</dt>
    <dd>
        <a href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
    </dd>
    <dt>粤语</dt>
    <dd>
        <a href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
    </dd>
    <dt class="cur">国语</dt>
    <dd style="display:block;">
        <a class="cur" href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
    </dd>
</dl>

<dl class="tab-bx">
    <dt>预告</dt>
    <dd>
        <a href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
        <a href="#">第13集</a>
        <a href="#">第14集</a>
        <a href="#">第15集</a>
        <a href="#">第16集</a>
    </dd>
    <dt>花絮</dt>
    <dd>
        <a href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
    </dd>
    <dt>粤语</dt>
    <dd>
        <a href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
    </dd>
    <dt class="cur">国语</dt>
    <dd style="display:block;">
        <a class="cur" href="#">第01集</a>
        <a href="#">第02集</a>
        <a href="#">第03集</a>
        <a href="#">第04集</a>
        <a href="#">第05集</a>
        <a href="#">第06集</a>
        <a href="#">第07集</a>
        <a href="#">第08集</a>
        <a href="#">第09集</a>
        <a href="#">第10集</a>
        <a href="#">第11集</a>
        <a href="#">第12集</a>
    </dd>
</dl>
<script src="tab.source.js"></script>
<script>
    !function(){
        //tab
        var tabMenu = new Tab({element:["tab-bx"]});
        tabMenu = null;
    }();
</script>
</body>
</html>

PS:要吃饭啦，下午还有事忙今天发了几个有点偷懒了，下午就不发了以后空了继续分享些，这些质量都还不理想

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.