javascript - 如何在 DOJO 中禁用向导 Pane 的 "Next"按钮

Question

我正在使用 dojo 1.5。我正在创建一个示例向导。下面是代码

    <div class="floater">
    <p>This example shows a wizard with customized button labels.</p>

    <div id="wizard1" dojoType="dojox.widget.Wizard" hideDisabled="true" previousButtonLabel="test" nextButtonLabel="Go on" doneButtonLabel="Finish">
        <div dojoType="dojox.widget.WizardPane"  >
            // Here some html form , User has to fill all information
        </div>
        <div dojoType="dojox.widget.WizardPane">
            <h1>Tab 2</h1>
        </div>
        <div dojoType="dojox.widget.WizardPane">
            <h1>Tab 3</h1>

            You won't be able to come back, but you can finish now...

        </div>
        <div dojoType="dojox.widget.WizardPane" >
            <h1>Tab 4</h1>

            ... and now you can't go back.
        </div>
        <div dojoType="dojox.widget.WizardPane"  doneFunction="done" >
            <h1>Tab 5</h1>
            ... and now you can finish up.

        </div>


    </div>
</div>

我想在向导的第一个 Pane 中隐藏带有标签“继续”的下一个按钮，直到用户填写第一个 Pane 中的所有信息。那么，您能否建议如何在最初加载向导时禁用向导中的“下一步”按钮。

Answer 1

我不知道最好的方法是什么。如果您使用 dijit.form.Form，您可以使用它的 onValidStateChange 方法，并在那里切换启用/禁用按钮。

var toggleWizardButton = function(valid) {
    dijit.byId("theWizard").nextButton.set("disabled",!valid);
    //if(valid) { /* enable "Go on" button here.. */ }
    //else      { /* opposite.. */ }
};
var form = dijit.byId("theFormInWizardPane1"),
    wiz1 = dijit.byId("theWizard");

dojo.connect(form, "onValidStateChange", toggleWizardButton);
wiz1.nextButton.set("disabled",true); // button disabled by default

fiddle 示例:http://jsfiddle.net/VQM2k/1/

另一种可能更好的方法是仅使用 WizardPane 的 passFunction，当它返回 false 时，将阻止向导继续前进。在其中，您可以获得表格并检查它是否有效(有点像您的其他问题 :))。

<div dojoType="dojox.widget.WizardPane" passfunction="passfunction" >
    // Here some html form , User has to fill all information<br/><br/>
    <form id="myForm" dojoType="dijit.form.Form">
        Name: <input dojoType="dijit.form.ValidationTextBox" required="true" />
    </form>
</div>

传递函数可以简单地是这样的:

var passfunction = function() {
    var form = dijit.byId("myForm");
    return form && form.validate();
};

fiddle :http://jsfiddle.net/VQM2k/