Отключить кнопку, пока вкладки не будут прочитаны

Question

У меня есть несколько вкладок, которые были созданы с использованием Javascript и Mootools, мой клиент хочет отключить «следующую кнопку» внизу страницы, пока вкладки не будут прочитаны (нажаты).Страница является динамической (создается с помощью PHP и MySQL), и может быть две или три вкладки, в зависимости от настроек.Сегодня я изо всех сил пытаюсь найти лучшее решение.

Любая помощь более чем приветствуется ...

Answer 1

посмотреть пример работы с jsfiddle: http://www.jsfiddle.net/dimitar/THMxa/

может работать с некоторыми классами и логикой, добавленными к щелчкам на вкладке и к следующему щелчку.

// 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...
    });
});

Answer 2

Поскольку число вкладок является динамическим, я бы, вероятно, использовал атрибут в заголовке / метке вкладки / что угодно, что указывает на то, что она не была прочитана, а затем, когда заголовок / метка вкладки / все прочее При нажатии этого параметра я изменил бы этот атрибут, чтобы указать, что он прочитал , и затем активировал бы функцию, которая может активировать кнопку в зависимости от того, были ли прочитаны все остальные вкладки.

Я не MooTools, но IIRC - это форк Prototype (хотя это было давно, и они, вероятно, разошлись). Обработчик нажатия может выглядеть примерно так в Prototype:

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

... где $$ - это прототип «поиск в DOM для элементов, соответствующих этому селектору CSS», а $ - это прототип «получить мне элемент с этим идентификатором». invoke там просто вызывает observe для каждого соответствующего элемента (вы могли бы сделать это с делегированием события), и я думаю, что observe довольно очевиден. : -)

Код выше делает следующие предположения:

1. Ваш заголовок вкладки или любой другой имеет класс "tabClass".
2. Вы создали таблицы с атрибутом «data-read», установленным в «N» (например, <div class="tabClass" data=read="N"> или аналогичный). Префикс data- должен поддерживать HTML5. (Да, нам наконец-то разрешено помещать любое старое произвольное имя атрибута в элементы, если мы этого хотим! Нам просто нужно добавить к ним префикс data-.)
3. Кнопка имеет идентификатор, "buttonId"
4. Кнопка запускается отключена

Редактировать Или использовать класс маркеров, если хотите, все вкладки начинаются с class="tabClass unread":

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

Дважды проверьте, что MooTools поддерживает селектор ".tabClass.unread" (это действительно должно, я просто говорю, проверьте). Некоторые реализации могут работать быстрее с селекторами на основе классов, чем на основе атрибутов.

Answer 3

Я бы добавил класс на вкладку, когда она нажата - как "нажал". Кроме того, проверьте, является ли «щелчок» последней вкладкой, поэтому ..

$ ('myElement'). Set ('class', 'clicked');

затем возьмите все элементы табуляции (я предполагаю элементы) и посчитайте их. Затем получите все элементы вкладки с классом «clicked»

Если они совпадают, все они были «нажаты».

Answer 4

Вам следует отключить кнопку, на которую вы отправляете запрос на загрузку контента, и включить его в обратном вызове, который обрабатывает возвращаемый контент.