1

div 「ギャラリー」と呼べる、エレガントで効率的なソリューションを探しています。

現在、jQuery UI タブを使用してdivおり、サーバー上で s を事前設定しています。ユーザーにはアクティブなタブのみがdiv表示され、次または前のタブに移動できます。ただし、リストには 100 を超えるアイテムが含まれているため、動的読み込みアプローチに切り替えたいと考えています。

最初に、アイテムの生成を AJAX 呼び出しに分離div し、組み込みのタブ AJAX 機能を使用しようとしました。ただし、jQuery UI Tabs AJAX を前後に移動するときの不具合は非常に目立ちます。タブが読み込まれると、キャッシュされるため、再び正常に動作します。

私は今、次のアイデアを持っています。

  1. ユーザーが「次へ」をクリックするたびに、どういうわけか次の 5 つのタブをプリフェッチします。

    ユーザーが非常に速くスクロールする可能性は低く、高速スクロールの場合の不具合は問題ありません。私がやりたいのは、通常、次のタブが表示される前にいくつか読み込まれるようにすることだけです。これはjQueryタブで可能ですか?

  2. サーバーに JavaScript 配列を入力divし、その場で を作成します。

    これは、私が検討している別の解決策です。divJavaScript に保存されたオブジェクト データによって生成する関数を作成することもできました。JavaScript はサーバーによって生成される可能性があります。

どちらがより適切ですか? 何か不足していますか？

4

1 に答える 1

1

わかりました。応答がなかったので、2 番目のルートを使用しました。これは良い解決策のようです。

このセクションのスクリプトは、headグローバルに表示itemsされるデータ リストに、サーバーによってインプレースで生成された JSON を入力します。
次に、タブdivが以前に定義されていた場所に、それらをオンザフライで生成するスクリプトを配置しました。

<div id="tabs" class="ui-tabs"> 
        <ul class="ui-tabs-nav"></ul>

        <script type="text/javascript"> 
            for (var i = 0; i < items.length; i++)
                createTab(items[i], i);                     
        </script> 
</div>

createTab関数は別の JS ファイルで定義され、次のdivアイテムの作成とリストを管理しulます。

function createTab(item, index) {
    createPanel(item, index).appendTo($('#tabs'));
    createTabItem(index).appendTo($('.ui-tabs-nav'));
}

// creates list item with a href="#tabs-1..n"
function createTabItem(index) {
    return $('<li></li>').append(
        $('<a></a>').attr('href', '#tabs-' + (index+1))
    );
}

// creates a div for tab
function createPanel(item, index) {
    var panel = $('<div class="ui-tabs-panel"></div>')
        .attr('id', 'tabs-'+ (index+1)); // id = "tabs-1..n"

    if (index > 0) panel.addClass('ui-tabs-hide'); // hide all tabs but the first

    // whatever you need to fill the tab with
    createPicture(item).appendTo(panel);
    createDescription(item).appendTo(panel);

    return panel;
}

これらはすべてページが読み込まれる前に行われるため、タブ ナビゲーションを管理するコードを変更する必要はありませんでした。

もちろん、これはまだイメージのプリフェッチを有効にするわけではありませんが、タブの作成が 1 か所で行われ、制御が容易になるため、はるかに簡単になります。

于 2011-06-17T11:21:59.143 に答える