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>

我想隐藏下一个按钮，该按钮具有标签“Go on”，用于向导的第一个窗格，用户从第一个窗格填充所有信息。那么请你建议如何在最初加载时禁用向导中的“下一步”按钮。

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

示例小提琴：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>

passfunction可以是这样的：

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

小提琴：http://jsfiddle.net/VQM2k/

如何在DOJO中禁用向导窗格的“下一步”按钮

1 个答案: