2

目的: 初期化後に UI タブのコンテンツを変更するにはどうすればよいですか。

以下のコードを参照してください。 $tabs.find(content-1) などの後の可能性のあるもの

  1. 実際、私のタブにはjsonリクエストに基づいたコンテンツがあり、要件（グラフ、テーブルなど）に従って解析および表示されます。
  2. 使えない
  3. すべてのタブにデータを個別に保持し、同時にロードする必要があるため、ajax コンテンツの ui ドキュメントで説明されている tab1 メソッド。Ajax メソッドは、1 つのタブ データを別のタブ データに置き換え続けますが、これは私の要件ではありません。

だから理想的には、

  1. タブは「loading ..」メッセージで開始する必要があります。
  2. 次に、その init イベントを検出した後、3 つの異なる ajaxcalls を作成し、データを処理し、完了したものはどれでも、"loading .." メッセージをそのコンテンツに置き換える必要があります。

私のJSFIDDLE

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a>
        </li>
        <li><a href="#tabs-2">tab2</a>
        </li>
        <li><a href="#tabs-3">tab3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>loading...</p>
    </div>
    <div id="tabs-2">
        <p>loading...</p>
    </div>
    <div id="tabs-3">
        <p>loading...</p>
    </div>
</div>

JS

$tabs = $('#tabs').tabs({
    cache: false,
});
//
$tabs.do something here
$tab. detect evet if tabs have initialized ..
then send ajax requests and append to tabs content area ..
4

1 に答える 1

1

ワーキングデモ

これを試して

私はこれがあなたが必要とするものだと思います

$(document).ready(function () {

    $tabs = $('#tabs').tabs({
        cache: false,
    });
    if ($('#tabs').hasClass('ui-tabs')) { // check if tabs initilized
        $('.tab').each(function () {
            var tab = $(this);
            $.ajax({
                url: '/echo/html/',
                success: function (data) {
                    tab.html("success"); // for demo
                }

            });

        });
    }
});
于 2013-09-26T07:33:05.763 に答える