JQ选项卡(面向对象)

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>JQ选项卡</title>
        <style>
            #div1 div,
            #div2 div,
            #div3 div,
            #div4 div {
                width: 200px;
                height: 200px;
                border: 1px #000 solid;
                display: none;
            }
            
            .active {
                background: red;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="div1">
            <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">
            <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="div3">
            <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="div4">
            <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>
        <input type="button" value="点击" id="input1">
    </body>
    <script type="text/javascript">
        /**
            title : 基于JQ的选项卡组件
            Options : event   delay
            Methods : nowSel()   getContent()
            Events : beforeClick  afterClick
        **/
        //jQ中的主动触发 : trigger()
        $(function() {
            var t1 = new Tab();
            t1.init('div1');

            var t2 = new Tab();
            t2.init('div2', {
                event: 'mouseover'
            });

            var t3 = new Tab();
            t3.init('div3', {
                event: 'mouseover',
                delay: 200
            });

            var t4 = new Tab();
            t4.init('div4');
            t4.nowSel(2);

            $('#input1').click(function() {
                alert(t4.getContent());
            });

            $(t4).on('beforeClick', function() {
                alert(t4.getContent());
            });

            $(t4).on('afterClick', function() {
                alert(t4.getContent());
            });
        });

        function Tab() {
            this.oParent = null;
            this.oInput = null;
            this.oDiv = null;
            this.isNow = 0;
            this.settings = { //默认参数
                event: "click",
                delay: 0
            };
        };

        Tab.prototype.init = function(oParent, opt) {
            $.extend(true, 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 time = null;
            this.aInput.on(this.settings.event, function() {
                var _this = this;
                if(This.settings.event == "mouseover" && This.settings.delay) {
                    time = setTimeout(function() {
                        show(_this);
                    }, This.settings.delay);
                } else {
                    show(_this);
                }
            }).mouseout(function() {
                clearTimeout(time);
            });

            function show(obj) {
                $(This).trigger("beforeClick");
                This.aInput.attr("class", "");
                This.aDiv.css("display", "none");
                $(obj).attr("class", "active");
                This.aDiv.eq($(obj).index()).css("display", "block");
                This.iNow = $(obj).index();
                $(This).trigger("afterClick");
            };
        };

        Tab.prototype.nowSel = function(index) {
            this.aInput.attr('class', '');
            this.aDiv.css('display', 'none');
            this.aInput.eq(index).attr('class', 'active');
            this.aDiv.eq(index).css('display', 'block');
            this.iNow = index;
        };

        Tab.prototype.getContent = function() {
            return this.aDiv.eq(this.iNow).html();
        };
    </script>

</html>
posted @ 2018-03-29 00:18 loewe0202 阅读(345) 评论(0) 收藏举报
刷新页面返回顶部
loewe0202

JQ选项卡(面向对象)

公告
