基于jquery开发的选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="../lib/jquery-2.1.4.min.js"></script>
    <script src="app/chosetab.js"></script>
</head>
<style>
    #div1 div,#div2 div,#div3 div,#div4 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
    .active{ background:red;}
</style>
<body>
<div id="div1" class="div1 test">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
<div id="div2" class="div2 test">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
<script>
    $(function () {
        var t1 = new Tab();
        t1.init('.div1',{});

        var t2 = new Tab();
        t2.init('.div2',{
            event:'mouseover',
            delay:100,
        });
    })
</script>
</body>
</html>
;(function ($, window, document, undefined) {
    function Tab() {//初始化配置
        this.oParent = null;
        this.aInput = null;
        this.aDiv = null;
        this.iNow = 0;
        this.settings = {  //默认参数
            event: 'click',
            delay: 0
        };
    }
    Tab.prototype.init = function (oParent, opt) {//合并配置，调用逻辑处理函数
        $.extend(this.settings, opt);
        this.oParent = $( oParent);
        this.aInput = this.oParent.find('input');
        this.aDiv = this.oParent.find('div');
        this.change();
    };
    Tab.prototype.change = function () {//逻辑处理函数
        var This = this;
        var timer = null;
        This.aInput.on(This.settings.event, function () {
            var _this = this;
            if (This.settings.event == 'mouseover' && This.settings.delay) {
                timer = setTimeout(function () {
                    show(_this);
                }, This.settings.delay);
            } else {
                show(_this);
            }
        }).mouseout(function () {
            clearInterval(timer);
        })
        function show(obj) {//逻辑处理函数主体
            This.aInput.attr('class', '');
            This.aDiv.css('display', 'none');
            $(obj).attr('class', 'active');
            This.aDiv.eq($(obj).index()).css('display', 'block');
        }
    }
    window.Tab = Tab;
})(jQuery, window, document);

 

posted @ 2016-04-10 14:26  XINYUHAI77  阅读(179)  评论(0)    收藏  举报