jquery - タブは 2 回クリックするまで選択状態にならない (初回)

Question

これは、 http://eq4.net/hive/で見られるように、jQuery UI タブで作業して以来、最初にページをロードしたとき (またはタブを追加した後) に長い間発生しています。

1 回クリックすると、load イベントと show イベントがトリガーされますが、コンテンツはパネルに読み込まれず、現在選択されているタブインデックスは -1 (なし) に設定され、タブはすべて選択状態から外れます。

次にもう一度クリックすると、タブを追加するまで、すべてが期待どおりに動作します。

この癖のデバッグを開始できるように、誰かが私を正しい方向に向けることができますか? 私のコードには、タブの選択に影響を与えるものは何もありません。そのほとんどは、正しく発生しているように見える UI の他の側面を更新しています。

jQuery UI 1.8.20 と jQuery 1.7.2 を使用しています - ありがとう

score 0 · Accepted Answer

報告する動作を確認し、タブが追加された後、以前に選択されたタブが自動的に2回再選択される回避策を提案することしかできません。最初の選択はバグのある効果のないものになり、2番目の選択は実際にタブ（および関連するパネル）を再選択します。

次の線に沿った何か多分：

$(function(){

    ...

    var selectedTab = null;

    $(selector).tabs({
          ...
          select: function(event, ui) {
              //Keep `selectedTab` up to date to remember the selected tab
              selectedTab = ui.tab; //or ui.index?
          }
          add: function(event, ui) {
               //Here re-select selectedTab twice (if not null).
               //Probably easier to use selectedTab.trigger('click') than the tabs' .select() method, (which requires the selector to be known).
          }
    });
});

タブがまだ選択されていない特殊なケース（つまりselectedTab === null）を処理する方法を理解するのは困難です。

これは厄介で非効率的なファッジです（そしてajaxモードでは推奨されません）が、プラグインをハックする必要はありません（簡単に修正できれば修正されているでしょう）。

score 0 · Accepted Answer

この動作の原因は fx オプションであることが判明しました。イベントバブラーが正しくバブリングしなかったと推測してみます。

削除時:

fx: {
     opacity: 'toggle',
    duration: 100
}

タブが正常に読み込まれるようになりました。fx オプションを使用したときに何が起こるか (そして何が起こらないか) を正確に調査し、報告します。

score 0 · Accepted Answer

これを入れてみてください

      $( "#pages" ).tabs().find( ".ui-tabs-nav" ).sortable({ 
              axis: "x",   sort: function(event, ui) {
                        },

Document.Ready で

      $(document).ready(function () {
            $( "#pages" ).tabs().find( ".ui-tabs-nav" ).sortable({
                axis: "x",
                sort: function(event, ui) {

            },
      });

score 0 · Accepted Answer

Google の功績により、jQuery UI タブの方法にはいくつかの問題があることは明らかですが.add()、次のプロセスは (当然のことながら) 完全に信頼できるようです。

電話.tabs('destroy')
新しいタブ (つまり、新しいliノード) を「手動で」追加します。
再初期化.tabs()

表面的には、これを達成するのは非常に簡単ですが、実際には、一般化された作業コードの開発にはいくつかの困難があります - 主に:

.add()最後だけでなく、任意のインデックスにタブを挿入するネイティブメソッドの機能を維持する必要性
現在選択されているタブを追跡し、再初期化後に再度選択する必要がある
UI の全範囲の.tabs()オプションが引き続き利用可能であることを保証する必要性。

やりがいのあるものを書くチャンスです！

しばらくコードをいじった後、UI タブプラグイン自体とその後のパッチまたはモンキーパッチよりも、「フィーダー」(より慣習的には「アダプター」) パターンの方が適切 (かつ単純) であるという結論に達しました。仕事をするための軽量のjQueryプラグインを思いつきました：

$.fn['tabsFeeder'] = function(options) {
    this.on('addTab', function(event, url, label, index) {
        var $that = $(this),
            s = $that.data('tabs').options;
        $that.tabs('destroy');
        try {
            var $lis = $that.find('li'),
                n = $lis.length;
            index = Math.max((index === undefined) ? n : index, 0);
            $lis.eq(Math.min(index, n - 1))[(index < n) ? 'before' : 'after']('<li><a href="' + url + '">' + label + '</a></li>');
            if (s.selected !== undefined && index <= s.selected) {
                s.selected += 1;
            }
            throw ('');
        }
        catch (e) {
            $that.tabs(s);
        }
    });

    this.on('current', function(event, callback) {
        $that = $(this);
        if ($that.eq(0).length > 0 && typeof callback === 'function') {
            var ui = {
                'tab': $that.find('li.ui-state-active a'),
                'panel': $that.find('.ui-tabs-panel').not('.ui-tabs-hide'),
                'index': $that.tabs('option', 'selected')
            };
            callback(event, ui);
        }
    });
    this.tabs(options);
};

私を信じてください、それは軽量です。

このプラグイン (および jQuery UI タブ) を配置すると、次のことができるようになります。

でタブを初期化します。標準のjQuery UIタブオプション$('selector').tabsFeeder(options)はどこにありoptionsますか - 追加も省略もありません
$('selector').trigger("addTab", [url, label]);or$('selector').trigger("addTab", [url, label, index]);の代わりに.tabs("add", url, label)orを呼び出します.tabs("add", url, label, index)。

そして、適切な手段としてcurrent、現在選択されているタブへのアクセスを許可するカスタムイベントを含めました (タブのネイティブイベントに従って「ui」オブジェクトとしてコールバック関数に配信されます)。

適切なメソッドの代わりにカスタムイベントハンドラーを使用することを完全に正当化できるかどうかはわかりませんが、プラグインは次のようになります。

書きやすくなった
より簡潔です
独自のデータを DOM に書き込む必要はありません。
メソッドチェーンは保証されています

ここtabsFeederで実際の動作を見ることができます

欠点

tabsFeederは再初期化に依存しているため.tabs()、コンテンツを再フェッチする必要がある可能性があるため、効率が悪く、おそらく ajax モードでの使用には適していません。

「addTab」イベントハンドラーは、UI タブプラグインのselectイベントを使用して、現在のタブを追跡します。オプションでコールバックを指定できるようにするために、起動順序が標準コールバック (存在する場合) としてハードコードされ、その後にプラグイン(1 つの JavaScript ステートメント)selectが続くコンパクトなオブザーバーのようなパターンを選択しました。defaultSelect()これは論理的で、デモでは正常に動作するように見えますが、完全には調査されておらず、すべてのアプリケーションで正しいとは保証できません。順序 (AB 対 BA) をプログラムで確立できるようにすることは可能ですが、これはコーディングが面倒で、おそらく必要ありません。

jquery - タブは 2 回クリックするまで選択状態にならない (初回)

4 に答える 4

Related

Reference