Sekmeler okundu kadar düğmesini devre dışı

3 Cevap php

Ben sekmeler (tıklandığında) okumuş kadar müvekkilim, devre dışı sayfanın altındaki 'sonraki düğme' istiyor, Javascript ve Mootools kullanılarak oluşturulmuş bazı sekmeleri var. Sayfa dinamik (PHP ve MySQL ile oluşturulan) ve set-up bağlı olarak, iki ya da üç sekme var olabilir. Ben iyi çözüm düşünmek bugün mücadele ediyorum.

Herhangi bir karşılama daha fazla yardım ...

3 Cevap

view example working on jsfiddle: http://www.jsfiddle.net/dimitar/THMxa/

sekme tıklama ve sonraki tıklama eklenen bazı sınıfları ve mantığı ile çalışabilirsiniz.

// fade out next button and set it to disabled, then define the event to check state.
document.id("next").store("disabled", true).set("opacity", .5).addEvent("click", function() {
    if (this.retrieve("disabled")) {
        alert("please view all tabs first!");
        // console.log(document.getElement("div.notclicked"));
        return;
    }
    // insert code here that goes next.
    alert("allowed to run");
});

// this is pseudo - you probably already have a function that assigns events on your tabs to change
document.getElements("div.tabs").each(function(tab) {
    // first tab may already be open so no click needed
    if (!tab.hasClass("clicked"))
        tab.addClass("notclicked");

    // add click event
    tab.addEvent("click", function() {
        if (document.getElement("div.notclicked"))
            this.addClass("clicked").removeClass("notclicked");
        // check again if that was the last one, if so, enable next button...
        if (!document.getElement("div.notclicked"))
            document.id("next").store("disabled", false).fade("in"); // or whatever

        // regular code for tabs here...
    });
});

Sekmelerin sayısı dinamik olduğundan, muhtemelen sekmesinin başlık / etiket / o sekmesinin başlık / etiket / ne olursa olsun tıklandığında sonra not okundu vardır ve belirten olursa olsun, bir öznitelik kullanmak istiyorum Ben had okuyun ve sonra da tüm diğer sekmeleri okumak olmuştu bağlı olarak etkinleştirme düğmesini olabilir işlevi tetikleyecek edilmiş olduğunu belirtmek için bu özelliğinizi değiştirmek istiyorum.

Ben bir mooTools kişi değilim, ama (bir süre oldu ve onlar muhtemelen uzaklaştığı ettik rağmen) IIRC bu Prototip bir çatal bulunuyor. Tıklama işleyicisi Prototip böyle bir şey olabilir:

$$('.tabClass').invoke('observe', 'click', function(event) {
    this.setAttribute("data-read", "Y");
    if ($$('.tabClass[data-read=N]').length == 0) {
        $('buttonId').disabled = false;
    }
});

... $$ Prototype'ın işlevini "Bu CSS seçici eşleşen öğeleri için DOM aramak" ve $ Prototip kullanıcısının "bana bu kimliği ile eleman almak" olduğu. invoke sadece orada observe her eşleşen öğe için (yerine olay heyeti ile bu yapabileceğini) çağırır ve ben observe oldukça aşikar olduğunu düşünüyorum. :-)

Yukarıdaki kod bu varsayımlar yapar:

  1. Sizin sekme başlığı veya ne olursa olsun sınıf "tabClass" vardır.
  2. Sen özniteliği ile tabloları yarattık "veri okumak", "N" (örneğin, <div class="tabClass" data=read="N"> veya benzeri) ayarlanır. data- önek HTML5 dostu olmaktır. (Evet, biz nihayet! Biz sadece data- ile önek olmasını istiyorsanız unsurlar üzerinde herhangi bir eski keyfi öznitelik adını koymak için izin verilir.)
  3. Düğmesi, bir kimliği vardır, "buttonId"
  4. Düğmesi devre başlıyor

Edit Ya da bir belirteç sınıfını kullanmak isterseniz, tüm sekmeleri ile başlar class="tabClass unread":

$$('.tabClass').invoke('observe', 'click', function(event) {
    this.removeClassName("unread");
    if ($$('.tabClass.unread').length == 0) {
        $('buttonId').disabled = false;
    }
});

MooTools ". TabClass.unread" seçici (gerçekten, ben sadece söylüyorum gerektiğini, çek) destekleyen çift kontrol edin. Bazı uygulamalar, özellik tabanlı olanlardan daha sınıf-tabanlı seçiciler ile daha hızlı çalışabilir.

Tıklandığında zaman sekmesine bir sınıf eklersiniz - "tıklanan" gibi. 'Tık' son sekme ise de, bu yüzden, çek ..

. $ ('MyElement') set ('sınıf', 'tıklanan');

then get all of the tab elements (a elements i assume) and count them. Then get all of the tab elements with class "clicked"

Eğer uyarsa, hepsi 'tıklandığında' idi.