web-dev-qa-db-ja.com

Jquery UI-選択したタブをリロードしますか？

.load（）関数があることを知っている選択したタブをリロードする方法はありますか？しかし、タブインデックスが必要であり、選択したタブIDを取得する方法が見当たらないようです。

jqueryjquery-uijquery-ui-tabs
7
Renari

更新：jQuery 1.9では、selectedオプションの名前がactiveに変更されました。 attommanの答えを参照してください。

現在選択されているインデックスを取得するには、tabs('option','selected')関数を使用します。

たとえば、ボタンがある場合#button （そしてその #tabs要素はタブになります）インデックスを取得する場所で、次の手順を実行します。

$("#button").click(function() {
    var current_index = $("#tabs").tabs("option","selected");
});

これがデモです： http://jsfiddle.net/sVgAT/

var current_index = $("#tabs").tabs("option","selected");
$("#tabs").tabs('load',current_index);

また、jQuery 1.9以降では、次のようにします。

var current_index = $("#tabs").tabs("option","active");
$("#tabs").tabs('load',current_index);
24
Simen Echholt

Simenには正解がありましたが、JQuery UI1.9以降は非推奨になりました。

http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active

「選択済み」の代わりに「アクティブ」を使用するようになりました

したがって、コードは次のようになります。

var current_index = $("#tabs").tabs("option","active"); $("#tabs").tabs('load',current_index);

7
attomman

他の誰かがこの質問に出くわし、私のようにjQuery EasyUIのタブを使用している場合、上記のSimenの回答は機能しません。むしろ、タブを更新するには、次を使用します。

var tab = $('#tt').tabs('getSelected');
tab.panel('refresh');

ここで、ttは、を介して作成されたタブグループのidです。

<div id="tt" class="easyui-tabs">
2
Bernd

これを機能させることができましたが、アクティブでないときに最初のタブが2回読み込まれるようになりました。誰かがこれについてこれ以上のアドバイスを持っているなら、それは大いにありがたいです。console showing a cancelled request to the server

上記のように、リクエストはサーバーに対して2回行われていますが、最初のリクエストは成功したため、2番目のリクエストはキャンセルされます。これが問題かどうかわからない..？しかし、コンソールでそれを見て安心していません

  constructor: (@element) ->
    @tabIndex = 0
    @tabs = @element.find('#tabs')
    @tabs.tabs
      spinner: "Loading.."
      cache: false
      ajaxOptions:
        cache: false
        error: ( xhr, status, index, anchor ) ->
          $( anchor.hash ).html "Couldn't load this tab. We'll try to fix this as soon as possible."

    #add custom load to make sure they always reload even the current tab when clicked
    @element.find('ul li a').click (e) =>
      if @tabIndex is @tabs.tabs('option', 'selected')
        @tabs.tabs 'load', @tabs.tabs('option', 'selected')
        @tabIndex = @tabs.tabs('option', 'selected')
1
Dave Robertson

Cookie用のこのプラグインをダウンロードします。

http://plugins.jquery.com/cookie/

JQueryCookieをページに挿入します

 <script src="jquery.cookie.js"></script>

そしてこれを追加します：

$(".tabs").click(function() {
    //getter , get the active tab
    var active = $( "#tabs" ).tabs( "option", "active" );
    $.cookie("tabs_selected", active);
});

var cookieValue = $.cookie("tabs_selected");
// setter, set the active tab stocked 
$( "#tabs" ).tabs( "option", "active",cookieValue );
0
Wassim Sboui