2

この非常に基本的なタブ プラグインを作成しました。

タブの変更を外部メソッドから簡単に呼び出せるように変更するにはどうすればよいですか。

/**
 * 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番目のタブでトリガーを呼び出します..（または、配列インデックスではなく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 に答える