禁用按钮，直到已阅读选项卡

Question

我有一些使用Javascript和Mootools创建的标签，我的客户希望禁用页面底部的“下一个按钮”，直到标签被读取（单击）为止。 该页面是动态的（使用PHP和MySQL创建），取决于设置，可能会有两个或三个选项卡。 我今天正在努力思考最佳解决方案。

任何帮助都超过了欢迎...

Answer 1

由于标签的数量是动态的，我可能会使用该标签的页眉/标签/任何表明它尚未被读取，然后单击该选项卡的页眉/标签/时什么的，我会改变该属性的一个属性表示已被读取，然后触发一个功能，该功能可以根据是否已读取所有其他选项卡来启用按钮。

我不是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;
    }
});

...其中$$是Prototype的“在DOM中搜索与该CSS选择器匹配的元素”功能，而$是Prototype的“获取具有此ID的元素”。 那里的invoke仅针对每个匹配元素调用observe （您可以使用事件委托来执行此操作），我认为observe是不言而喻的。 :-)

上面的代码做出以下假设：

1. 您的标签页眉或任何具有“ tabClass”类的标签。
2. 您已经创建了将属性“数据读取”设置为“ N”的表（例如， <div class="tabClass" data=read="N">或类似的表）。 data-前缀应是HTML5友好的。 （是的，如果需要，我们终于可以在元素上放置任何旧的任意属性名称！我们只需要在它们前面加上data- 。）
3. 该按钮具有ID“ 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 2

查看在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 3

您应该禁用发送请求以加载内容的按钮，并从处理返回的内容的回调中启用它。

Answer 4

单击该选项卡时，我会向其添加一个类-例如“ clicked”。 另外，检查“单击”是否为最后一个选项卡，如此..

$（'myElement'）。set（'class'，'clicked'）;

然后获取所有选项卡元素（我假设一个元素）并计数。 然后使用“ clicked”类获取所有选项卡元素

如果它们匹配，则全部被“单击”。