4

2つのタブがあります。

  • 最初のものは最も重要であり、コンテンツを非常に高速にロードします。
  • 2つ目はそれほど重要ではなく、コンテンツ（グラフと要約）の読み込みに時間がかかりすぎます。

したがって、両方のタブのコンテンツを同時にロードしたくありません。理想的には、最初のタブコンテンツをロードし、ユーザーが2番目のタブをクリックすると、関連するコンテンツを（デマンドで）ロードします。

そのためには、サーバー側で2番目のタブがクリックされたことを確認してから、関連するすべての情報をクライアント側に送り返す必要があります。

これを行う方法についてのアイデアはありますか？

4

5 に答える 5

3

jQuery UIタブコントロールは、AJAXコンテンツが入力されたタブをサポートします。hrefHTMLコンテンツを返すサーバー側のURLへのタブリンクにを設定するだけです。

例えば：

<div id="my-tabs">
    <ul>
        <li><a id="myfirst-link" href="/Server/One">First</a></li>
        <li><a id="mysecond-link" href="/Server/Another">Second</a></li>   
    </ul>
</div>

$('#my-tabs').tabs({
    load: function (event, ui) {           
        switch (ui.tab.id) {
            case 'myfirst-link':
                break;
            case 'mysecond-link':
                break;
        }
    },
    ajaxOptions: {
        success: function(result) {
        },
        error: function (xhr, status, index, anchor) {
        }           
    }
});

タブの読み込みが完了したときにJavascriptを実行する必要がある場合は、loadイベントを使用できます。各ajax呼び出しの成功またはエラーをグローバルに処理する必要がある場合は、を使用できますajaxOptions。

于 2012-10-02T12:44:28.940 に答える
2

このためには、クライアント側とサーバー側の両方で変更を加える必要があります。サーバー側（またはコードビハインド）で、メソッドを静的にし、[WebMethod]属性で装飾します。

public partial class _Default : System.Web.UI.Page
{
    ...
    [WebMethod]
    public static void MethodToBeCalledUsingAjax(parameters)
    {
        //tab clicked logic goes here
    }
    ...
}

クライアント側では、タブクリック関数内で、以下のようにjqueryajaxを使用します

var req = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/MethodToBeCalledUsingAjax",
            data: "{}",
            dataType: "json",
            success: function (msg) {
            }
        });

このajax呼び出しは、オンデマンドで、タブがクリックされたことをサーバー側に通知し、それに応じてコードを処理します。

スタイリングを無視してください...私はstackoverflowに不慣れです:)

于 2012-10-02T13:18:41.720 に答える
1

タブにデータを入力するために使用jQuery-UI Tabs: Content via AJAXします。ソース： http： //jqueryui.com/demos/tabs/#ajax

コードは次のとおりです（上記のリンクから取得）。

<script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>



<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Sample Text</p>
    </div>
</div>

</div>
于 2012-10-02T12:45:03.863 に答える
0

jQueryタブをクリックしたときにコードビハインドでイベントを発生させる方法はわかりませんが、イベントハンドラーを使用してJuiceUIタブでこれを行うことは可能です。SelectedTabChanged

于 2012-10-03T12:38:35.310 に答える
0

ユーザーが2番目のタブをクリックするのを待つべきではありません。むしろ、あなたができることは、document.onReadyイベントの最初のタブを埋めることです。要求されたajaxを使用して最初のタブのコンテンツをフェッチする必要があります。

最初のajaxリクエストの返信を受け取ったら、返信コールバックで、2番目のタブに対して新しいリクエストを作成します。このように、ユーザーが最初のタブを処理している間はバックグラウンドでロードされ、2番目のタブに切り替えると準備も整います。

これをドキュメントで使用します

 $(document).ready(function() {
  var req = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default.aspx/MethodToBeCalledUsingAjax",
            data: "{}",
            dataType: "json",
            success: function (msg) {
            }
        });
});

成功した場合：関数、2番目のタブをロードするためのコードを配置します。

于 2012-10-03T13:49:25.010 に答える