jQuery ztabs选项卡插件zhiz.net

分类:前端技术 | 网络转载 |  时间:2013-10-11

head部分内容:
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.ztabs.js"></script>
jquery.ztabs.js文件内容如下:
<script type="text/javascript">
        (function ($) {
            $.fn.ztabs = function () {
                var s = {};
                for (var i = 0; i < arguments.length; ++i) {
                    var a = arguments[i];
                    switch (a.constructor) {
                        case Object: $.extend(s, a);
                            break;
                        case Boolean: s.change = a;
                            break;
                        case Number: s.start = a;
                            break;
                        case Function: s.click = a;
                            break;
                        case String: if (a.charAt(0) == '.') s.selected = a;
                        else if (a.charAt(0) == '!') s.event = a;
                        else if (a.charAt(0) == '*') s.event = a;
                        else s.start = a;
                            break;
                    }
                }
                if (typeof s['return'] == "function")
                    s.change = s['return'];
                return this.each(function () {
                    $.ztabs(this, s);
                });
            }
            $.ztabs = function (tabs, options) {
                var meta = ($.metadata) ? $(tabs).metadata() : {};
                var s = $.extend({}, $.ztabs.settings, meta, options);
                if (s.selected.charAt(0) == '.') s.selected = s.selected.substr(1);
                if (s.event.charAt(0) == '!') s.event = s.event.substr(1);
                if (s.start == null) s.start = -1;
 
                var showId = function () {
                    if ($(this).is('.' + s.selected))
                        return s.change;
                    var id = "#" + $(this).attr("data-tab").split('#')[1];
 
                    var aList = [];
                    var idList = [];
 
                    $("li[data-tab*='#']", tabs).each(function () {
                        if ($(this).attr("data-tab").match(/#/)) {
                            aList.push(this);
                            idList.push("#" + $(this).attr("data-tab").split('#')[1]);
                        }
                    });
                    if (s.click && !s.click.apply(this, [id, idList, tabs, s])) return s.change;
                    for (i in aList) $(aList[i]).removeClass(s.selected);
                    for (i in idList) $(idList[i]).hide();
                    $(this).addClass(s.selected);
                    $(id).show();
                    return s.change;
                }
                var list = $("li[data-tab*='#']", tabs).unbind(s.event, showId).bind(s.event, showId);
                list.each(function () {
                    $("#" + $(this).attr("data-tab").split('#')[1]).hide();
                });
                var test = false;
                if ((test = list.filter('.' + s.selected)).length);
                else if (typeof s.start == "number" && (test = list.eq(s.start)).length);
                else if (typeof s.start == "string" && (test = list.filter("[data-tab*='#" + s.start + "']")).length);
                if (test) {
                    test.removeClass(s.selected);
                    test.trigger(s.event);
                }
                return s;
            }
            $.ztabs.settings = {
                start: 0, change: false, click: null, selected: ".selected", event: "!click"
            };
        })(jQuery);
    </script>

body部分内容:
    <div class="tabs">
        <ul>
            <li data-tab="#litabs-1"><a href="http://www.zhiz.net">选项一</a></li>
            <li data-tab="#litabs-2"><a href="#">选项二</a></li>
            <li data-tab="#litabs-3" class="selected"><a href="#">选项三</a></li>
        </ul>
        <div id="litabs-1">
            选项一AAAAAAAAA
        </div>
        <div id="litabs-2">
            选项二BBBBBBBBBB
        </div>
        <div id="litabs-3">
            选项三-CCCCCCCCCC
        </div>
    </div>
    <script type="text/javascript">
        $(".tabs").ztabs("!mouseover");
    </script> 


Copyright © 2013 ZHIZ.NET, INC. ALL RIGHTS RESERVED. TERMS OF SERVICE & PRIVACY POLICY. 1.3.5 蜀ICP备11006209号-2 TEL/18200120015 QQ:297055170