JQuery UI Sekmeler - "Yükleme ..." iletisi

Question

Hepsi,

Jquery UI iç içe geçmiş sekmeleri kullanıyorum. Sekme yüklenirken sekme metninin yanında bir AJAX Döndürücü görüntüsünü görüntülemenin herhangi bir yolu olup olmadığını merak ediyordum. Sekme metnini "Yükleme" olarak değiştirmek istemiyorum. Birden çok sekme aynı zamanda veya birbiri ardına yüklendiğinde, her yükleme sekmesinin yanındaki döndürücü görüntünün görüntülenmesi gerektiğini düşünün.

Herhangi bir öneriniz var mı?

Teşekkür

Answer 1

Balu, Geçenlerde benzer bir şey gerekiyordu. Projemde, sekmelerin başlık sekmesini korumalarını istedim, ancak ajax yükleme türü animasyonu ekledim. İşte kullanılan budur:

$(".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(); } 
       }); 

"spinner" seçeneği sekmesinin tıklama "Yükleniyor ..." etkisini ortadan kaldırır. "Select" etkinliği, seçilen sekmeyi ve animasyonu içeren yeni bir span eklememizi sağlar. İçerik yüklendikten sonra, animasyonu kaldırmak için "yükleme" etkinliğini kullanırız. Birden fazla kullanıcı tıklamasının sekmeleri yok etmesini önlemek için, herhangi bir sekme seçimindeki tüm animasyonları kaldırırız.

Bu sorunu zaten çözdünüz mü? Eğer öyleyse, lütfen çözümü paylaşın.

Answer 2

Bunun için farklı bir yöntem kullandım. Sekme başlıklarının oldukları gibi kalmasını ve sekme içinde 'yükleme' bilgilerinin olmasını istedim.

Ben şöyle öyle yaptım yol: Önceki poster gibi

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

, ben değiştirip sekme başlıkları önlemek için spinner yöntemi kullanılmıştır. Yeni bir sekme seçildiğinde select olayı harekete geçer, bu yüzden seçili olan sekmenin kimliğini aldım ve ajax içeriğinin varsayılan olarak yüklendiği DIV'leri referans alan bir değişken oluşturmak için bir tane ekledim.

Kimliğe sahip olduğunuzda, yapmanız gereken tek şey HTML'in DIV içindeki yerine yükleme mesajınızla değiştirilmesidir. Ajax tamamlandığında, gerçek içerikle sizin için tekrar yerini alacaktır.

Answer 3

Sekmeleriniz için önbelleğe alma özelliğini kullanıyorsanız, bu çözüm daha iyi uyum sağlar, yalnızca içerik sayfada yoksa ajax yüklemesini gösterir.

Eğer beforeLoad Handler kullanabilirsiniz jQuery UI v1.12 yılında

$(".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

: ....

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