jQueryUI のタブを順番を任意に入れ替える

By | 2015/02/23 7:54 PM
Comment

jQuery UI って本当に便利です。特にタブは本当に重宝してます。
でも、これってタブの順番を入れ替えたり、それをcookieに保存できたら、なお便利だと思いませんか。
そこで以下のようなスクリプトを書いてみました。

タブの id と cookie 保存名は tabs にしてあります。
適宜変更してください。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var tabs = {
    jQuery : $,
    saveToCookie: 'tabs',
 
    init : function(){
        var ref = this;
 
        // タブ生成
        if ($.cookie(ref.saveToCookie)){ // cookieに保存済みなら、その配置にする
            var tabsList = $.cookie(ref.saveToCookie).split(',');
            var tabsList2 = {}, t_href, e_text;
            $("#tabs ul li a").each(function(){
                t_href = $(this).attr("href");
                t_text = $(this).text();
                tabsList2[t_href] = t_text;
            });
            $("#tabs ul").empty(); // 一旦、元の並びを消す
            for(var i = 0, len = tabsList.length; i < len; i++){
                href = tabsList[i];
                if(typeof(tabsList2[href]) != "undefined"){
                    $("#tabs ul").append("<li><a href='" + href + "'>" + tabsList2[href] + "</a></li>");
                }
            }
            $('#tabs').tabs().find('.ui-tabs-nav').sortable({ axis: 'x' });
        }
        $('#tabs').tabs().find('.ui-tabs-nav').
            sortable({ axis: 'x',update: function(event, ui){ref.save_tabs();} }); // sotable でタブ移動ができる。update で移動時にcookie保存
    },
 
    save_tabs : function () {
        if(!this.saveToCookie) {return;}
        var cookie_tabs = [];
 
        $("#tabs ul li a").each(function(){
            cookie_tabs.push($(this).attr("href"));
        });
        $.cookie(this.saveToCookie, cookie_tabs.join(','), {expires: 10}); // cookie に10日保存
    }
}
 
tabs.init();

いやー、jQueryって本当にいいものですね。

この記事を書いた人

黒服
ぴかちう