JQuery UI tabs using ajax to load document fragment
I am using JQuery UI tabs and would like to load a fragment from a generated page. However, the whole page is loaded. Here is the code:
<head>
<scr开发者_开发知识库ipt src="/js/jquery-ui-1.8.15.custom.min.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<div id="tabs">
<ul >
<li><a href="/page #content">Tab Head</a></li>
</ul>
</div>
Is there an easy way of doing this? Also, is the Tabs plugin using .load() or .get() ajax calls?
You may need to do it yourself by intercepting the desired tab and load the content in. For example, you could include the actual URL for loading the fragment to a data attribute, say, data-content-url="/page #content", and load it in the select event. So, it would look something like:
$('#tabs').tabs({
select: function(event, ui) {
var $tabAnchor = $(ui.tab);
if (ui.index == 0 && !$tabAnchor.data('completed')) {
$($tabAnchor.attr('href')).load($tabAnchor.data('content-url'), function() {
// indicate the content has been loaded
$tabAnchor.data('completed', true);
});
}
}
});
The HTML would look something like:
<div id="tabs">
<ul>
<li><a href="#tabs1" data-content-url="/page #content">Tab Head</a></li>
<li><a href="#tabs2">Tab 2</a></li>
</ul>
<div id="tabs1"></div>
<div id="tabs2">...</div>
</div>
You could use the load-event ("This event is triggered after the content of a remote tab has been loaded.") of the tabs to parse/prepare/edit the loaded content and get the fragment of the page.
加载中,请稍侯......
精彩评论