web-dev-qa-db-ja.com

jquery uiタブはCookieをサポートしなくなりましたか？それで？

これが自由形式の質問であることをお詫びしますが、途方に暮れています。

Jquery UIのバージョン1.9以降、複数のページにわたるタブのアクティブな状態を保存するために、cookieオプションを使用して非推奨になりました。 http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

今、これを達成する方法に関する他のドキュメントを見たことはありません！だから私は頭をかいてしまいました。

私の最善の推測は、ある種のeventを使用してCookieを作成し、次にCookieをロードすることです。または、タブのアクティブ状態を複数のページにまたがってユーザー設定で保存する他の方法はありますか？

jqueryjquery-uicookiesjquery-ui-tabs
17
PaulHanak

今日も同じ問題が私をかみました。うまくいくようです：

  1. Jquery.cookieプラグイン（ https://github.com/carhartl/jquery-cookie ）を使用します（この手順は必要ありませんが、Cookieの扱いが簡単になります）

  2. 次のコードフラグメントを使用します。

    $( ".selector" ).tabs({
    active   : $.cookie('activetab'),
    activate : function( event, ui ){
        $.cookie( 'activetab', ui.newTab.index(),{
            expires : 10
        });
    }
});

これにより、「activetab」と呼ばれるCookieが設定され、10日後に有効期限が切れます（その他のオプションについては、 jquery.cookieドキュメント を参照）。タブがクリックされるたびに、現在選択されているタブが記憶されます。このCookieは初期化時に読み取られ、最後に保存されたタブが表示されます。初めてページにアクセスすると、タブが折りたたまれます。

19
journeyer

localStorage を使用してこれを行う、レイアウトに依存しない短い方法：

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

カスタムデータ属性を使用してそれを行うレイアウト固有の方法（属性値がスクリプトの他の場所で何らかの方法で使用される場合に役立つ可能性があります）。

jQuery UI：

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

HTMLレイアウトの例：

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>
9
dsgriffin

イベントタブがアクティブになり、sessionStorageまたはlocalStorageに保存されます。

$(function() {
    var selectedTabId = sessionStorage.getItem("selectedTab");
    selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0
    $("#tabs").tabs({
        active: selectedTabId,
        activate : function( event, ui ) {
            selectedTabId = $("#tabs").tabs("option", "active");
            sessionStorage.setItem("selectedTab", selectedTabId);
        }
    });
});
5
atlmag

単に：

activate: function(event, ui) {        
    localStorage.setItem("accIndex", $(this).tabs("option", "active"))
},
active: parseInt(localStorage.getItem("accIndex"))
4
Suba Levi

HTML5のlocalStorage機能を使用すると、問題の解決策が得られ、この種のことを行うための推奨される方法になりました。 Cookieを使用すると、すべてのWeb要求および応答に追加のデータが追加されます。

LocalStorageは ブラウザでサポートされている IE8と同じくらい古く、IE6とIE7のサポートが本当に必要な場合は shim to do it があります。

[〜＃〜] html [〜＃〜]

<div class="mytab" id="mytab_1">
 <ul>....</ul>
 <div id="xx1">...</div>
 ...
</div>

[〜＃〜] js [〜＃〜]

currTabIndex=sessionStorage['mytab_1'];

そしてtabfuntionの呼び出し

$('.mytab').tabs({
 active:currTabIndex,
 load:function(event,ui){
  sessionStorage[''+this.id]=(ui.panel.index()-1);
 }
});

これがお役に立てば幸いです。

4
Sureshkumar Natarajan

次のようなアクティブなオプションを使用して、アクティブなタブを設定できます。

$( ".selector" ).tabs({ active: 1 });

Cookie以外のWebページに値を渡す方法はたくさんあります。たとえば、クエリパラメータと非表示フィールドを使用できます。次に、jQueryのonloadの例を使用していずれかの例を読み取るonloadスクリプトを作成します。 $（function（）{}）。

クエリ文字列を読むには、メソッドを提供するこのページをチェックしてください

Jquery読み取りクエリ文字列

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

隠しフィールドを読み取ります。

$( ".selector" ).tabs({ active: $('#my-hidden-fiel').val() });

私は、この機能を削除するというjquery uiの決定に同意します。これは、Cookieは実際にはセッションを永続化するためにのみ使用されるべきであり、たとえばフィールドやタブを形成するためではないためです。

1
RyanFishman