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"
选项卡的内容。
我该如何做到这一点?
答
只看文档,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样式,因为它看起来像标签小部件为你做的那样。
答
不知道我是否对你有好感;据我所知,如果您将所有选项卡都设置为相同的属性,则UI将重新挖掘相同的DIV以加载内容,而不是为每个选项卡创建一个新的选项卡,并根据需要隐藏或显示。是一件好事,因为浏览器没有得到如此重的权重与大量的DIVS加载,但隐藏...
你是怎么做到这一点。你使用jQuery的标签,或者你是否推出自己的Ajax劫持(不是很难,但你仍然需要在答案中提到的CSS ...) – 2010-04-23 10:48:11
我无法让它工作.. – Jake 2010-04-23 16:06:23