25

jquery UI 1.10.0より前は、次のように間接的にタブを選択していました。

$("#tabs").tabs( "select", 5 );

また

$("#tabs").tabs( "select", "tab6" );

ここで、同じコードでjquery UI 1.10.0を使用すると、 「タブ ウィジェット インスタンスにそのようなメソッド 'select'はありません」というエラーが表示されます。

次のように「オプション」「アクティブ」を使用するようにコードを変更しました。

$("#tabs").tabs( "option","active", 5 );

ただし、インデックスしか使用できないようです。ID による選択が機能しなくなりました。したがって、このような ID を使用する代わりに (これは機能していません):

$("#tabs").tabs( "option","active", "tab6" );

次のようにする必要があります。

var idx = $('#tabs a[href="#tab6"]').parent().index();
$("#tabs").tabs( "option", "active", idx );

または、短い形式で

$("#tabs").tabs( "option", "active", $("#tab6").parent().index() );

「変更ログ」( http://jqueryui.com/changelog/1.10.0/ )を読みましたが、この変更について何も表示されません。

jquery UI 1.10.0で名前でタブを選択する別の方法はありますか?

試してみたい人のために、ここにデモを作成しました...

http://jsbin.com/ojufej/1

4

5 に答える 5

9

jQueryは v.1.9でメソッドを非推奨にしましたselect

このselectメソッドは、アクティブなオプションを更新するだけのために廃止されました。selectメソッドへのすべての呼び出しをメソッドへの呼び出しに置き換えてoption、アクティブなオプションを変更する必要があります。

v.1.10 では、完全に削除されました。

削除: メソッドの選択。( #7156、7cf2719 )

名前でタブを選択するのに最も近いのは、href属性セレクターとtriggerメソッドを使用することでした。

$( "[href='#tab6']").trigger( "click" );

デモ: http://jsfiddle.net/QRUGM/

元のselect方法は似たようなことをしました：

this.anchors.eq( index ).trigger( this.options.event + this.eventNamespace );

名前の代わりにインデックスでタブを選択したのは彼らだけでした。

于 2013-02-13T21:51:22.580 に答える
7

私はこれを使用することになりました（例を参照）：

http://jsfiddle.net/AzSUS/

基本的に、これらの機能を追加しました

$.fn.tabIndex = function () {
    return $(this).parent().find(this).index() - 1; 
};
$.fn.selectTabByID = function (tabID) {
    $(this).tabs("option", "active", $('#' + tabID).tabIndex());
};
$.fn.selectTabByIndex = function (tabIndex) {
    $(this).tabs("option", "active", tabIndex);
};

Ans は次のように使用します。

$("#tabs").selectTabByIndex(0);

$("#tabs").selectTabByID('tab2');

私の例の HTML セクションでわかるように...

<div id="tabs">
  <ul>
    <li><a href="#tab1">[0] #tab1</a></li>
    <li><a href="#tab2">[1] #tab2</a></li>
    <li><a href="#tab3">[2] #tab3</a></li>
    <li><a href="#tab4">[3] #tab4</a></li>
  </ul> 
  <div id="tab1">Tab 1 Content</div>
  <div id="tab2">Tab 2 Content</div>
  <div id="tab3">Tab 3 Content</div>
  <div id="tab4">Tab 4 Content</div>
</div>

... 私は非常にシンプルで明確に定義されたタブの構造を持っています。

「実際の」アプリケーションには 3 レベルのタブが含まれています

2 レベルのこの例を参照してください。

http://jsfiddle.net/vgaTP/

私がはっきりしていなかったもう1つのことは、タブで「クリック」をトリガーしたくないということです。クリックせずにそのタブに「切り替え」たいだけです。私にとって、「クリック」イベントはタブのコンテンツをロードしますが、タブを「選択」するたびにコンテンツをロードしたくありません。

于 2013-05-14T19:00:22.937 に答える
1

これらの廃止された関数を参照する大量のレガシー コードが既にあり、移行が頭痛の種である場合は、古い/新しいメソッドを橋渡しする下位互換性モジュールを作成します。

$.extend(true, $.ui.tabs.prototype, {
    select: function (indexOrId) {
        if (typeof indexOrId == "integer")
            this.option("select", indexOrId);
        else
            $("[href='#"+ indexOrId +"']", this.element).click();
    }
    // other methods..
});
于 2013-05-14T08:17:33.377 に答える
0

上記の $( "[href='#tab6']").trigger( "click" ); を使用しました。Ayman Safadi によって投稿されました (ありがとう!) 隠しフィールドとその作品は素晴らしいです。この投稿の大きなアップhttp://geekswithblogs.net/dotNETvinz/archive/2010/07/09/jquery-tab-retain-selected-tab-across-postbacks-in-asp.net.aspx Aymens と組み合わせて答えは、この最終的な答えにたどり着くのに役立ちました:)ありがとう

 <script type="text/javascript">
    $(function () {

        var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();

        if (currTab == 0) {
            $("[href='#tab_1_1']").trigger("click");
        }

        if (currTab == 1) {
            $("[href='#tab_1_2']").trigger("click");
        }

        if (currTab == 2) {
            $("[href='#tab_1_3']").trigger("click");
        }

        if (currTab == 3) {
            $("[href='#tab_1_4']").trigger("click");
        }   

    });
</script>

また、以下のコードも機能しましたが、何らかの理由でタブが青くなりました

 $('#tabs').tabs();
                   var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();
                   $('#tabs').tabs("option", "active", currTab);
于 2013-06-11T16:59:52.900 に答える