0

JQueryUI タブを使用して、Web フォームに一連のタブがあります。

タブをクリックすると、そのタブのデータが読み込まれます (タブをクリックしたときのみ)。最初のページの読み込み時にすべてのタブ データを読み込みたくないので。

タブでリンクボタンを使用したので、タブをクリックするとボタンクリックイベントが発生し、ポストバックが発生します。しかし、これは起こりません。

私の質問はです。JQueryUI タブ プラグインは、タブ内のリンクのデフォルト アクションを無効にしますか? タブli要素で何らかのアンカーリンクを使用しないと、タブが適切にレンダリングされないことに気付きました.JQueryは明らかにアンカーをレンダリングする必要があります.

タブが選択されている場合にのみデータをロードするにはどうすればよいですか?

4

1 に答える 1

0

http://jqueryui.com/tabs/#ajax

右側のメニューの ajax 経由のコンテンツ

次に、次のようなことができます

ajaxpostback.ashx?page=page1

そして、意図したコンテンツのみを返しています

コード例

Javascript

<script type="text/javascript">
$(function () {
    $("#tabs").tabs();
});

HTML

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="Handler1.ashx?page=1">Tab 1</a></li>
    <li><a href="Handler1.ashx?page=2">Tab 2</a></li>
    <li><a href="Handler1.ashx?page=3">Tab 3 (slow)</a></li>
    <li><a href="Handler1.ashx?page=4">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
    <p>
       Nunc tristique tempus lectus.</p>
</div>

ハンドラ

    public void ProcessRequest(HttpContext context)
    {
        if (string.Compare(context.Request.QueryString["page"].ToString(), "1") == 0)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("1");
        }
        else if (string.Compare(context.Request.QueryString["page"].ToString(), "2") == 0)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("2");
        }
        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("rest");
        }
    }
于 2013-05-08T15:03:50.857 に答える