0

ダイアログ内にjQueryタブウィジェットがあります。この Fiddleで Advisers の画像が初めてクリックされると、ダイアログとタブ ウィジェットが正常に表示されます。ただし、ダイアログを閉じて画像をもう一度クリックすると、ダイアログはレンダリングされますが、タブ ウィジェットはレンダリングされません。

タブウィジェットで使用されているメソッドに関係していると思いますtoggle()が、そのメソッドを削除すると、タブウィジェットが表示されなくなります。アドバイザ画像の 2 回目以降のクリックでタブ ダイアログをレンダリングするために、ダイアログを閉じたときにページの状態を「再初期化」する必要があるようです (ここで UI 用語に取り組んでいることをお許しください。私はサーバーです)。 -サイドコーダー）。

誰か私にポインタを教えてもらえますか？

HTML

<a href="#" id="advisers-image">
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional
        advisers</div>
</a>

<a href="#" id="industry-image">
    <div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>

<div style="clear: both;"></div>

<div id="advisers-dialog" class="dialog">

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Law firms</a></li>
            <li><a href="#tabs-2">Accounting and audit firms</a></li>
            <li><a href="#tabs-3">Management consultants and economists</a></li>
        </ul>
        <div id="tabs-1">
            <p>Law firm text goes here.</p>
        </div>
        <div id="tabs-2">
            <p>Accounting and audit firm text goes here.</p>
        </div>
        <div id="tabs-3">
            <p>Management consultants and economists text goes here.</p>
        </div>
    </div>
</div>


<div id="industry-dialog" class="dialog" title="Industry">Industry
    text goes here</div>

Javascript

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

<script type="text/javascript">         
$( "#industry-dialog" ).dialog({ autoOpen: false });
$( "#industry-image" ).click(function() {
$( "#industry-dialog" ).dialog( "option", "modal", true );
$( "#industry-dialog" ).dialog( "option", "height", "auto" );
$( "#industry-dialog" ).dialog( "option", "width", 700 );
$( "#industry-dialog" ).dialog( "open" );
});
</script>

<script type="text/javascript">         
$( "#advisers-dialog" ).dialog({ autoOpen: false });
$( "#advisers-image" ).click(function() {
$( "#advisers-dialog" ).dialog( "option", "modal", true );
$( "#advisers-dialog" ).dialog( "option", "height", "auto" );
$( "#advisers-dialog" ).dialog( "option", "width", 700 );
$( "#advisers-dialog" ).dialog( "open" );
$( "#tabs" ).tabs( "option", "heightStyle", "content" );
$( "#tabs" ).tabs( 'select', 0 );
$( "#tabs" ).toggle();
});
</script>
4

2 に答える 2

1

基本的な理由は、画像をクリックするたびに呼び出すことです$( "#tabs" ).toggle();。

したがって、偶数回クリックするとタブが非表示になり、奇数回クリックするとタブが表示されます。タブは非表示に設定されたダイアログに含まれているため、最初からタブを非表示にする必要はありません。

追記:

オプションは両方のダイアログで重複しているため、開くたびに設定する必要はありません。元のオプション オブジェクトに統合し、両方のダイアログで 1 つのオブジェクトを共有して、多くのコードを削減できます。

var commonDialogOptions={
    autoOpen: false,
    modal:true,
    width:700
}
$("#industry-dialog, #advisers-dialog").dialog(commonDialogOptions);

これにより、クリック ハンドラー内のオプションの設定が削除されます。特定のオプションを個別に設定する必要がある場合は、必要に応じてそれを行うことができます

コードのデモを縮小し、タブの非表示/表示を削除: http://jsfiddle.net/8UBQF/2/

于 2013-03-29T20:51:37.840 に答える
0

簡単な修正は、呼び出すことです

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

それ以外の

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

.show()現在の状態に関係なく、単に要素を表示しますが、それを.toggle()切り替えます。

#tabsこの特定のケースでは、最初に を非表示にする必要がある理由がわかりません。それらはダイアログ内にあり、表示されません。最初に電話をかけなかった場合は、後で.hide()電話する必要はありません。.show()jsFiddle リビジョンを参照してください: http://jsfiddle.net/8UBQF/1/

于 2013-03-29T20:50:14.580 に答える