Soru JQuery UI Sekmeleri - “Yükleniyor…” mesajı


Herşey,

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 sekmenin aynı anda veya birbiri ardına yüklendiğinde, her yükleme sekmesinin yanında döndürücü görüntünün görüntülenmesi gerektiğini unutmayın.

Baska öneri?

Teşekkürler


25
2017-11-13 16:03


Menşei




Cevaplar:


Sekmeleriniz için önbelleğe alma kullanıyorsanız, bu çözüm daha iyi bir uyumdur, ancak içerik zaten sayfada değilken yalnızca ajax yüklemesini gösterir.

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

39
2017-12-02 09:13



Bu gerçekten yararlı bir yazı, teşekkürler. Ben jQ UI 1.8 fonksiyon içindeki herhangi bir HTML içeriğini düzeltir, ama sadece gerçekten bir mesaja ihtiyacım var. - Echilon
Bu harika, ama bir şekilde otomatik olarak seçilen ilk sekme için çalışmıyor. Elle div ekleyerek çalıştı ve kodunuz onu kaldırır. - m1k3y3
jQ UI'nin daha yeni sürümü (şimdilik 1.11 kullanıyorum) select Etkinlik. kullanım beforeLoad yerine. Bu aynı zamanda, @ m1k3y3'ün yüz yüze geldiğini de yanıtlıyor (ilk sekmede çalışmıyor) çünkü AFAIK select eşittir activate daha yeni sürümde ve ilk sekme otomatik olarak etkinleştirilir - blackbiron


Buna kendim 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.

Yaptığım yol şu şekildedir:

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

Önceki poster gibi, sekme başlıklarının değiştirilmesini önlemek için spinner yöntemini kullandım. 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.

ID'ye sahip olduğunuzda, yapmanız gereken tek şey HTML’yi DIV’in içine yükleme mesajınız ile değiştirmektir. Ajax tamamlandığında, gerçek içerikle sizin için tekrar yerini alacaktır.


8
2018-05-13 12:50





Balu, son zamanlarda benzer bir şeye ihtiyacım vardı. Projemde, sekmelerin başlık sekmesini korumalarını istedim, ancak ajax yükleme türü animasyonu ekledim. İşte benim kullandığım şey:

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

"Döndürücü" seçeneği, sekmenin tıklanmasıyla "Yükleniyor ..." efektini 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.


5
2017-12-18 14:56



merhaba .... benim için işe yaramadı, üstelik ses mantıksaldır .. seçici ile yanlış bir şey olabilir .. aşağıdaki sol çalıştı .. paylaştığınız için teşekkürler - bsr


JQuery UI v1.12'de, beforeLoad Handler'ı kullanabilirsiniz:

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

2
2018-04-01 16:45