finish: function(event, ui) {
alert(“Thank you!”);
}
})
/** The bindings below are event handlers, they will all be executed before proceeding to the callback */
/** ui = {
type: “previous|next|first|last|manual”,
currentStepIndex: [int],
nextStepIndex: [int]
}; */
// This event handler is specifically used for form validation
.bind(“jwizardchangestep”, function (event, ui) {
// “manual” is always triggered by the user, never jWizard itself
if (ui.type !== “manual”) {
var $currentStep = $w.find(“.jw-step:eq(” + ui.currentStepIndex + “)”),
$inputs = $currentStep.find(“input:text”);
/** I am assuming you have `jquery.validate.js` running in this callback */
if ($inputs.length > 0 && !$inputs.valid()) {
$currentStep.find(“label.error”).effect(“highlight”);
return false;
}
}
})
// This event handler is for handling custom navigation through the wizard
.bind(“jwizardchangestep”, function (event, ui) {
// “manual” is always triggered by the user, never jWizard itself
if (ui.type !== “manual”) {
// 这里其实是比较重要的，因为这里就是选择对应div的实现方式的，你只需要把相应模块的javascript代码集成到这里就可以了。
switch (ui.currentStepIndex) {
// on the first step, the user must agree to the terms and conditions
case 0:
if ($(“#agree”).is(“:not(:checked)”)) {
// use this effect to give the user feedback
$(“#agree”).parent().effect(“pulsate”);
return false;
}
break;
// on the 3rd step, (zero-index) the username being filled means we are skipping the openid step
case 2:
if ($(“#username”).val() != “”) {
// by setting this value on the event object, I am telling jWizard to override the nextStepIndex
event.nextStepIndex = 4;
// you must at least call event.preventDefault(); in order for this to work
return false;
}
break;
}
}
// by using nextStepIndex, we can intercept the user when they are *about to start* on a particular step
switch (ui.nextStepIndex) {
// in this case, I am displaying a summary on the last step of the wizard
case 4:
var oFormValues = {
name: $(“#name”).val(),
email: $(“#email”).val(),
username: $(“#username”).val(),
openid: undefined
};
$(“#summary-name”).children(“td”).text(oFormValues.name);
$(“#summary-email”).children(“td”).text(oFormValues.email);
if (oFormValues.username != “”) {
$(“#summary-username”).show().children(“td”).text(oFormValues.username);
$(“#summary-openid”).hide().children(“td”).text(“”);
} else {
var $openid = $w.find(“input:radio:checked[name=openid]”);
