1

全て、

JQuery UI のネストされたタブを使用しています。次のような構造を考えてみましょう: 動物、鳥の 2 つのメイン タブがあります。動物の下には、「猫」、「犬」の 2 つのタブがあります。タブ「Cats」と「Dogs」の両方を選択すると、AJAX を介してロードする必要があります。したがって、それらのコードは次のようになります。

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab" title="Dogs"><span>Dogs</span></a></li>
    </ul>  
</div>

<script type="text/javascript">
$(document).ready(function()
{
    $("#tabs-loading-message").show();
    $('#fragment-1').tabs({cache:false, spinner:''});
});
</script>

問題は、AJAX URL をロードするために共通の div を維持したいということです。例: Cats または Dogs をクリックすると、これらのタブのコンテンツがdiv とdiv"<div id='commonDiv'></div>ではなくに移動する必要があります。ローディングは再利用可能である必要があります。つまり、タブ内のどこからでも呼び出された場合、タブのコンテンツをリロードする必要があります。"cats""dogs"reload("Dogs")"dogs""dogs"

どうすればこれを達成できますか？

4

2 に答える 2

2

ドキュメントを見ただけでは、それを行う方法については何も浮かびません。ただし、タブ ウィジェットを使用せずに、基本的なタブ機能用に独自のクリック イベントを定義するのは簡単です。

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab" title="Dogs"><span>Dogs</span></a></li>
    </ul>  
    <div id="commonDiv"></div>
</div>

$(document).ready(function(){
   $('#fragment-1 a').click(function(){
      $('#commonDiv').load($(this).attr('href'));
   });
}):

ただし、タブウィジェットがそれを行うように見えるため、独自の css スタイルを定義する必要があります。

于 2010-02-03T21:15:17.227 に答える
0

私があなたをよく理解しているかどうかはわかりません。私の知る限り、すべてのタブに同じタイトルを付けると、UIは、タブごとに新しいDIVを作成して必要に応じて非表示または表示するのではなく、同じDIVを再利用してコンテンツを読み込みます。多くのDIVSがロードされているが非表示になっているため、ブラウザの重みがそれほど大きくならないので、これは良いことです...

于 2010-05-08T14:47:05.873 に答える