2

私のasp.netプロジェクトにはパネルがあり、その上にjqueryタブのdivがあります。最初はパネルが非表示になっていて、ボタンをクリックすると表示されます。

これは非常に単純なコードです:

<div id="tabs">
        <ul id="none">
            <li><a href="#tabs-1">Asset details</a></li>
            <li><a href="#tabs-2">Structure details</a></li>
            <li><a href="#tabs-4">Audit Info</a></li>
        </ul>

        <div id="tabs-1">Some Content for tab 1</div>
        <div id="tabs-2">Some Content for tab 2</div>
        <div id="tabs-3">Some Content for tab 3</div>
    </div>

そしてjqueryコード：

function myfunction() {

$("#tabs").tabs();

}

問題は、パネルを表示すると、タブ div が表示されますが、フォーマットされていないことです。

myfunction に遅延を設定すると、すべて正しく実行されます。

function myfunction() {

//$("#tabs").tabs();

setTimeout(function () {
    $("#tabs").tabs();
}, 500);

}

この問題をより安全な方法で解決する方法はありますか?

ここに不足しているコード：

クリック時にパネルを表示するボタン:

<my:RoundedButton ID="BillingDataButton" runat="server" 
SkinID="Small"
Text="Billing data" 
OnClick="BillingDataButton_Click"

/>

コードビハインド:

protected void BillingDataButton_Click(object sender, EventArgs e)
    {

        BillingDataPanel.Show();

    }

私はこれを試しました（マイケルに感謝します）：

$(document).ready(function() {
$("#tabs").tabs();

});

しかし、ボタンをクリックしてパネルが表示されると、結果は次のようになります。

ここに画像の説明を入力

更新 - 可能な解決策

私のasp.netページにこのコードを追加しました：

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (s, e) {

    myfunction();

});

これにより、タブを表示するための jquery コードがリクエストの最後に実行されるようになります。この場合、setTimeout は要求されません。

より良い解決策があればお知らせください。

4

1 に答える 1

0

これは実際には予想される動作ですが、よりクリーンな解決策があります。

$(document).ready(function() {
    $("#tabs").tabs();
});

ご覧のとおり、DOM が完全に利用可能になるまで、jQuery はすべての変更を行うことはできません。これが遅延が機能する理由ですが、それは偶然です. これがもっと遅いブラウザで実行されていたら、間違いなく失敗していたでしょう。

ただし、イベントを活用することdocument.readyは、コミュニティの間でより安定し、好まれ、受け入れられているソリューションです。実際、初期化に関する限り、jQuery ではこのメソッド以外で何もするべきではありません。

于 2013-05-20T13:18:54.017 に答える