jQuery Tools:只有一个AJAX选项卡

时间:2011-01-23 02:44:16

标签: jquery jquery-tools jquery-tabs

我想使用jQuery Tools Tabs,并拥有一组常规内联内容标签和一个AJAX标签。但我只看到内联内容或ORjax内容的样本。我可以混合它们吗?

1 个答案:

答案 0 :(得分:3)

AFAIK,它既可以是AJAX,也可以不是。但是,您可以自己轻松地AJAX单个窗格。您需要做的就是添加一个单击处理程序(最好使用.one(),以便在第一次运行后将其自身删除)到选项卡;然后,此单击处理程序可以使用.load()或任何其他您想要的AJAX加载窗格的内容。

例如,HTML将是这样的:

<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li id="ajax-tab"><a href="#">Tab 3</a></li>
</ul>
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div id="ajax-pane"></div>
</div>

并且JavaScript将是这样的:

$("ul.tabs").tabs("div.panes > div");
$('#ajax-tab').one('click', function() {
    $('#ajax-pane').load('/some/path/that/returns/our/html');
});

这是一个简单的实例:http://jsfiddle.net/ambiguous/stxha/