jQuery UI って本当に便利です。特にタブは本当に重宝してます。
でも、これってタブの順番を入れ替えたり、それをcookieに保存できたら、なお便利だと思いませんか。
そこで以下のようなスクリプトを書いてみました。
タブの id と cookie 保存名は tabs にしてあります。
適宜変更してください。
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って本当にいいものですね。