JQuery UI 选项卡 - 加载 AJAX 选项卡内容答案

【问题标题】：JQuery UI Tabs - Load AJAX Tab contentJQuery UI 选项卡 - 加载 AJAX 选项卡内容
【发布时间】：2010-02-03 20:50:01
【问题描述】：

全部，

我正在使用 JQuery UI 嵌套选项卡。考虑这样的结构：有 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>

问题是，我想维护一个通用 div 来加载 AJAX url。例如：当您单击 Cats 或 Dogs 时，这些选项卡的内容应该进入 "<div id='commonDiv'></div> 而不是进入 "cats" div 和 "dogs" div。从某种意义上说，加载应该是可重用的，如果从"dogs" 选项卡内的任何位置调用reload("Dogs")，它应该重新加载"dogs" 选项卡内容。

我怎样才能做到这一点？

【问题讨论】：

你是怎么做到的。你使用 jquery-tabs 还是你自己的 ajax 劫持（不是那么难，但你仍然需要答案中提到的 css ......）

标签： ajax jquery-ui jquery-ui-tabs

【解决方案1】：

只看文档，没有任何关于如何做到这一点的信息。不过，不使用标签小部件很容易，并为基本标签功能定义您自己的点击事件。

<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 样式，因为选项卡小部件似乎为您做了这些。

【讨论】：

【解决方案2】：

不确定我是否理解你；据我所知，如果您为所有选项卡提供相同的标题属性，则 UI 将重新使用相同的 DIV 来加载内容，而不是为每个选项卡创建一个新选项卡并根据需要隐藏或显示。这是一件好事，因为浏览器不会因为加载但隐藏的大量 DIVS 而变得如此沉重......

【讨论】：