JQuery यूआई टैब - "लोड हो रहा है ..." संदेश

Question

सभी,

मैं jQuery के यूआई नेस्टेड टैब का उपयोग कर रहा हूँ। मैं बस सोच रहा था कि टैब लोड होने के बाद, AJ टेक्स्ट स्पिनर छवि को टैब टेक्स्ट के आगे प्रदर्शित करने का कोई तरीका है या नहीं। मैं टैब टेक्स्ट को "लोडिंग .." में बदलना नहीं चाहता हूं। विचार करें कि जब कई टैब के बाद एक ही समय या एक में लोड कर रहे हैं, स्पिनर छवि प्रत्येक लोड हो रहा है टैब के बगल में प्रदर्शित किया जाना चाहिए ..

किसी भी सुझाव?

धन्यवाद

Answer 1

बालू, मैं हाल ही में कुछ इसी तरह की जरूरत है। मेरी प्रोजेक्ट में, मैं चाहता था कि टैब टैब शीर्षक बनाए रखें, लेकिन AJAX- लोडिंग प्रकार एनीमेशन संलग्न करें। यहाँ मैं क्या प्रयोग किया जाता है:

$(".tabs").tabs({ spinner: '', 
       select: function(event, ui) { 
        $(".tabs li a .loader").remove(); 
        $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
        }, 
       load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); } 
       }); 

"स्पिनर" विकल्प टैब के क्लिक पर "लोड हो रहा है ..." प्रभाव को हटा। "चयन" घटना हमें चयनित टैब प्राप्त करने और एनीमेशन युक्त एक नया अवधि जोड़ने की अनुमति देती है। एक बार सामग्री लोड होने के बाद हम एनीमेशन को हटाने के लिए "लोड" ईवेंट का उपयोग करते हैं। टैब को नष्ट करने से कई उपयोगकर्ता क्लिक को रोकने के लिए, हम किसी भी टैब चयन पर सभी एनिमेशन को हटाते हैं।

क्या आप इस मुद्दे को पहले से ही हल कर चुके हैं? यदि हां, तो समाधान साझा करें।

Answer 2

मैंने अपने लिए एक अलग विधि का उपयोग किया। मैं चाहता था कि टैब शीर्षक बने रहें, और टैब में 'लोडिंग' जानकारी हो।

तरह से मैं यह इस प्रकार है क्या किया:

$("#matchTabs").tabs({ 
     spinner: "", 
     select: function(event, ui) { 
     var tabID = "#ui-tabs-" + (ui.index + 1); 
     $(tabID).html("<b>Fetching Data.... Please wait....</b>"); 
     } 
    }); 

पिछले पोस्टर की तरह, मैं स्पिनर विधि का इस्तेमाल किया बदले जाने से टैब खिताब को रोकने के लिए। चुनिंदा घटना तब होती है जब एक नया टैब चुना जाता है, इसलिए मुझे वर्तमान में चयनित टैब की आईडी मिली और एक वैरिएबल बनाने के लिए जोड़ा गया जो डीआईवी का संदर्भ देगा जिसमें AJAX सामग्री डिफ़ॉल्ट रूप से लोड की जाती है।

एक बार जब आप आईडी है, तुम सब करने की जरूरत है अपने लोड हो रहा है संदेश के साथ DIV अंदर एचटीएमएल की जगह है। जब अजाक्स पूरा हो जाता है, तो यह वास्तविक सामग्री के साथ आपके लिए इसे फिर से बदल देगा।

Answer 3

आप अपने टैब के लिए कैशिंग का उपयोग कर रहे हैं, तो इस समाधान propably है एक बेहतर फिट है, यह केवल ajax लोड हो रहा है पता चलता है, तो सामग्री को पहले से ही पृष्ठ पर नहीं है।

$(".tabs").tabs({ 
    cache:true, 
    load: function (e, ui) { 
    $(ui.panel).find(".tab-loading").remove(); 
    }, 
    select: function (e, ui) { 
    var $panel = $(ui.panel); 

    if ($panel.is(":empty")) { 
     $panel.append("<div class='tab-loading'>Loading...</div>") 
    } 
    } 
}) 

Answer 4

jQuery यूआई v1.12 आप beforeLoad हैंडलर का उपयोग कर सकते हैं:

$('#tabs').tabs({     
beforeLoad: function(event, ui) { 
    ui.panel.html('Loading') 
} 
});