JQuery Ui Tabs - مخصص "Loader" علامات Tabs

Question

لدي التعليمات البرمجية التالية لتوليد علامات التبويب JQuery UI:

<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>

أنا قادر على عرض رسالة التحميل، ولكن كيف يمكنني إخفاء محتويات لوحة التبويب، عندما يتم تحديدها وإظهار المحتويات عند تحميلها؟

Answer 1

يمكنك التقاط حدث النجاح من AJAX:

.tabs({ajaxOptions: {success: function() {
    $("#tabs-loading-message").hide();
}}});