Question

是插件：http://www.dbarnes.info/jWizard/
初始化如下：

mywizard = $("#wizard").jWizard({
        menuEnable: true,
        counter: {enable: true},
        effects: {enable: true},
        buttons: {
            cancelHide: false,
            cancelType: "button",<button>
            finishType: "submit",
            cancelText: "Cancel", 
            previousText: "Back",
            nextText: "Next",
            finishText: "Submit"
        }
    });

在每个步骤完成一些验证之前，我不希望显示下一个按钮。我尝试添加$(".jw-next-button").bind("click", function(){ ... console.log('got here');... if(validation == 'bad') return false});控制台确实已记录，但向导不会继续前进。有关改进策略的任何线索或提示？

Answer 1

在javascript文件 jquery.jWizard.js 中，找到以下内容

updateMenu: function (firstStep) {
            var wizard = this,
                currentStep = this._stepIndex,
                $menu = this.element.find(".jw-menu");

            if (!firstStep) {
                this._effect($menu.find("li:eq(" + currentStep + ")"), "menu", "change");
            }

            $menu.find("a").each(function (x) {
                var $a = $(this),
                    $li = $a.parent(),
                    iStep = parseInt($a.attr("step"), 10),
                    sClass = "";

                if (iStep < currentStep) {
                    sClass += "jw-active ui-state-default";
                } else if (iStep === currentStep) {
                    sClass += "jw-current ui-state-highlight";
                } else if (iStep > currentStep) {
                    sClass += "jw-inactive ui-state-disabled";
                    $a.removeAttr("href");
                }
                $li.removeClass("jw-active jw-current jw-inactive ui-state-default ui-state-highlight ui-state-disabled").addClass(sClass);
            });

在其下方添加以下代码：

var title = $("ol .jw-current a").html();
$(".jw-button-next").attr("disabled", "disabled").removeClass("ui-state-hover"); 
validator(title);

首先我们获取当前页面的名称，然后禁用下一个按钮，然后调用当前标题的验证器函数。然后我们对验证器进行编码，这样如果满足给定页面的给定条件，它将再次激活下一个按钮。

function validator(page)
    {
        switch(page){
            case "Page 1":
                if(... == true)
                   $(".jw-button-next").removeAttr("disabled");
            break;
            ....
        }
}

在继续之前在jWizard上添加验证

1 个答案: