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

我正在使用JQuery UI嵌套选项卡。考虑这样的结构：有2个主标签：动物，鸟类。在动物下，有两个标签“猫”，“狗”。这两个选项卡“猫”和“狗”应通过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网址。例如：当你点击猫或狗时，这些标签的内容应该进入"<div id='commonDiv'></div>而不是进入"cats" div和"dogs" div。加载应该是可重用的，从某种意义上说，如果从"dogs"选项卡内的任何地方调用reload("Dogs")，它应该重新加载"dogs"选项卡的内容。

我该如何做到这一点？

来源

2010-02-03 Jake

你是怎么做到这一点。你使用jQuery的标签，或者你是否推出自己的Ajax劫持（不是很难，但你仍然需要在答案中提到的CSS ...） – 2010-04-23 10:48:11

我无法让它工作.. – Jake 2010-04-23 16:06:23

只看文档，nothings弹出如何做到这一点。虽然很容易不使用标签小部件，并为基本标签功能定义自己的点击事件。

<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-03 21:15:17 munch

不知道我是否对你有好感;据我所知，如果您将所有选项卡都设置为相同的属性，则UI将重新挖掘相同的DIV以加载内容，而不是为每个选项卡创建一个新的选项卡，并根据需要隐藏或显示。是一件好事，因为浏览器没有得到如此重的权重与大量的DIVS加载，但隐藏...

来源

2010-05-08 14:47:05

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

回答

相关问题