var $w = $("#events-test");
$({ errorClass: "ui-state-error-text" });
$w
.jWizard({
buttons: {
cancelType: "reset", // The action triggered when clicking the "Cancel" button, for example, in the project, jump to the first page and start again.
finishType: "submit" // When you click "finish" in the last step, the action to set off is to submit.
},
// When clicking the "Cancel" button, the action triggered, such as when I am in the project, is to jump to the first page and start over.
cancel: function(event, ui) {
$("firstStep");
}, // The action triggered when clicking previous. For example, in my project, because when all the emails are sent, the user cannot be allowed to previous page, so I have to ban the function of the previous page. It's very simple, as follows;
previous: function(event, ui) {
// if(==7){return false;} is fine. 7 refers to the sequential numbers of your div, starting from 0, this one will count.
},
next: function(event, ui) {
// The same goes for this, that is, control the situation on the next page, and the same is true for the above. For example, in my project, there is a data uploader, and if there is no, it cannot be uploaded. In this case, you can set a bool value first, and then
if(fileUploadComplete){ $.get("@("VerificationSchema", "Home")", // Children's shoes who are learning MVC here should be very familiar with it. In fact, it is the method below in action home VerificationSchema function (data) { // Get the data returned after successful var newData = eval(data); // Because of the json used, use eval to convert schemaVerification=; if() { var listing1 = ("listing1"); = "<font color='red' size='20px'> go on.</font>"; } else { ("ErrorNotification").innerHTML=" Schema wrong,please check it."; var listing1 = ("listing1"); = ; } },"json");} else { //This is mainly to prompt when no data is selected alert("Please firstly Upload the Excel File you need"); return false; } break; },
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 ( !== "manual") {
var $currentStep = $(".jw-step:eq(" + + ")"),
$inputs = $("input:text");
/** I am assuming you have `` running in this callback */
if ($ > 0 && !$()) {
$("").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 ( !== "manual") {
// This is actually quite important because here is to choose the corresponding div implementation method. You only need to integrate the javascript code of the corresponding module into here.
switch () {
// 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
= 4;
// you must at least call (); 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 () {
// 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();
$("#summary-email").children("td").text();
if ( != "") {
$("#summary-username").show().children("td").text();
$("#summary-openid").hide().children("td").text("");
} else {
var $openid = $("input:radio:checked[name=openid]");
= ($ === 1) ? $() : $("#openid-other").val();
$("#summary-username").hide().children("td").text("");
$("#summary-openid").show().children("td").text();
}
break;
}
});
// if the user clicks the openid link on step 3, (zero-index) cause the wizard to jump to the openid step
$("#openid").click(function () {
$("changeStep", 3);
return false;
});
// if an openid radio button is checked, blank out the `other` textbox
$("input:radio[name=openid]").change(function (event) {
$("#openid-other").val("");
});
// if the `other` openid textbox is used, blank out the radio buttons
$("#openid-other").change(function (event) {
if ( != "") {
$("input:radio[name=openid]").removeAttr("checked");
}
});