2

I have written this very basic tab plugin.

How can I modify it so that changing the tab can be easily called from a external method.

/**
 * jQuery Tabs
 */
(function($) {
    $.fn.tabs = function(options) {
        var defaults = {
            tabs : "div.tab",
            expire : null
        };

        function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : ";path=/;expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        }

        function getCookie(c_name) {
            var i, x, y, ARRcookies = document.cookie.split(";");
            for (i = 0; i < ARRcookies.length; i++) {
                x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
                y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
                x = x.replace(/^\s+|\s+$/g, "");
                if (x == c_name) {
                    return unescape(y);
                }
            }
        }
        return this.each(function() {
            var settings = $.extend({}, defaults, options);
            var dis = $(this);
            var index = dis.index();
            var tabs = dis.find(settings.tabs);
            var tabs_menu = dis.find("ul.tabmenu li");
            var cookie = getCookie("tab_" + index);
            if (typeof cookie != "undefined" && dis.find("div.tab:eq(" + cookie + ")").length) {
                tabs.hide();
                dis.find("div.tab:eq(" + cookie + ")").show();
                tabs_menu.eq(cookie).addClass("selected");
            } else {
                tabs.hide().filter("div:first").show();
                tabs_menu.eq(0).addClass("selected");
            }
            dis.find("ul.tabmenu a").click(function(a) {
                tabs.hide();
                tabs.filter(tabs.eq($(this).parent().index())).show();
                tabs_menu.removeClass("selected");
                $(this).parent().addClass("selected");
                setCookie("tab_" + index, $(this).parent().index(), settings.expire);
                a.preventDefault();
                $(this).trigger('tabsselect');
            });
            dis.find("div.tab").each(function(a) {
                var b = dis.find("div.tab").size() - 1;
                if (a != b) {
                    $(this).append("<a href='#' class='next-tab'>Next Tab &#187;</a>");
                }
                if (a != 0) {
                    $(this).append("<a href='#' class='prev-tab'>&#171; Prev Tab</a>");
                }
            });
            dis.find(".next-tab").click(function(a) {
                var c = tabs_menu.filter(".selected").index() + 1;
                setCookie("tab_" + index, c, settings.expire);
                tabs_menu.removeClass("selected").eq(c).addClass("selected");
                $(this).parent().hide().next().show();
                a.preventDefault();
                $(this).trigger('tabsselect');
            });
            dis.find(".prev-tab").click(function(a) {
                var c = tabs_menu.filter(".selected").index() - 1;
                setCookie("tab_" + index, c, settings.expire);
                tabs_menu.removeClass("selected").eq(c).addClass("selected");
                $(this).parent().hide().prev().show();
                a.preventDefault();
                $(this).trigger('tabsselect');
            });
        });
    };
})(jQuery);
4

2 回答 2

1

我建议只使用已经存在的 JQUery UI 选项卡。

但是你可以触发一个标签来打开

$(id_of_tab_link).trigger("click");

更干净一点，定义另一个函数 set_active_tab(i) （就像你对标签所做的那样）并执行类似的操作：

$(container).find("div.tab")[i].trigger("click");

这将在第 n 个选项卡上调用 trigger .. （或者，使用第 n 个选择器而不是数组索引）

于 2012-10-17T14:30:37.923 回答
0

只需选择您应用选项卡的元素。

$('#somedivid').tabs({ pass in some configuration object to change the tab });
于 2012-10-17T14:30:05.677 回答