Jquery UI tabs - Custom "Loader" for AJAX tabs
I have the following code to generate Jquery UI tabs:
<div id="tabs-loading-message" style="display:none">Loading, Please wait..</div>
<div id="fragment-2">
<ul>
<li><a href="/public/animalstab" title="Animals"><span>Animals</span></a></li>
<li><a href="/public/birdstab" title="Birds"><开发者_如何转开发span>Birds</span></a></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#tabs-loading-message").show();
$('#fragment-2').tabs(
{
cache:false, spinner:'', selected: 0 ,
select: function(event,ui) {
//show spinner
$("#tabs-loading-message").show();
},
load: function() {
// hide spinner
$("#tabs-loading-message").hide();
}
}
);
});
</script>
I am able to display the loading message, but how can I hide the contents of the tab panel, when it's selected and show the contents when loaded?
you can catch success event from ajax:
.tabs({ajaxOptions: {success: function() {
$("#tabs-loading-message").hide();
}}});
精彩评论