18

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

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

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

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

4

6 に答える 6

19

今日も同じ問題に悩まされていました。動作するように見えるものは次のとおりです。

  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
        });
    }
});

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

于 2013-09-03T22:25:18.347 に答える
10

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>
于 2015-03-03T02:54:04.137 に答える
6

イベントタブをアクティブにしてから、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);
        }
    });
});
于 2014-12-07T10:09:10.693 に答える
1

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

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

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

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

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 は、たとえばフォーム フィールドやタブではなく、セッションを永続化するためにのみ使用する必要があるためです。

于 2013-01-14T04:22:44.437 に答える