Introduction to jWiard, a powerful wizard control based on JQuery_jquery

$(".jWizard") .jWizard({
menuEnable: true,
counter: {
enable: true,
progressbar: true
},
effects: { enable: true }
}) ;

var $w = $("#events-test");
$w.validate({ errorClass: "ui-state-error-text" });
$w
.jWizard({
buttons: {
cancelType: "reset", // The action triggered when the "Cancel" button is clicked. For example, in my project, I jump to the first page and start again.
finishType: "submit" // The action triggered when "finish" is clicked in the last step, that is, submission.
},
// The action triggered when the "Cancel" button is clicked, such as what I did. In the project, it jumps to the first page and starts again.
cancel: function(event, ui) {
$w.jWizard("firstStep");
}, // Triggered when previous is clicked. Action. For example, in my project, when all emails are sent, the user cannot go to the previous page, so I want to disable the previous page function. It is very simple, as follows;
previous: function(event, ui) {
// if(ui.currentStepIndex==7){return false;} That’s it. 7 refers to the sequential number of your div, starting from 0, haha. Just know how to count.
},
next: function(event, ui) {
// The same thing applies here, it is the same as above in controlling the next page. There is a function for uploading data. If not, you cannot let it upload. In this case, you can set a bool value first, and then,
if(fileUploadComplete){ $.get("@Url.Action("VerificationSchema", "Home")", // Children who are learning MVC here should be familiar with it. In fact, it is the method VerificationSchema function (data) { // The data returned after successful acquisition var newData = eval(data); // Because json is used, eval is used for conversion schemaVerification=newData.HasErrors; if(newData.HasErrors) { var listing1 = document.getElementById("listing1"); listing1.innerHTML = "Congruations.Please go on."; } else { document.getElementById("ErrorNotification").innerHTML="Sorry.Your Schema wrong, please check it."; var listing1 = document.getElementById ("listing1"); listing1.innerHTML = newData.Result; } },"json");} else { //This is mainly to prompt alert("Please firstly Upload the Excel File you need" when no data is selected. ); 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 (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") {
// This is actually more important, because this is where you choose the implementation of the corresponding div. You only need to add the javascript code of the corresponding module Just integrate it here.
switch (ui.currentStepIndex) {
// 첫 번째 단계에서 사용자는 이용 약관에 동의해야 합니다.
case 0:
if ($("#agree").is( ":not(:checked)")) {
// 이 효과를 사용하여 사용자에게 피드백을 제공합니다
$("#agree").parent(). effect("pulsate");
거짓을 반환합니다.
}
휴식;
// 세 번째 단계에서 (제로 인덱스) 사용자 이름이 채워지면 openid 단계를 건너뛴다는 의미입니다.
사례 2:
if ($("#username").val() != "") {
// 이벤트 객체에 이 값을 설정함으로써 jWizard에게 nextStepIndex
event.nextStepIndex = 4;를 재정의하도록 지시합니다.
// 최소한 event.preventDefault()를 호출해야 합니다. 이것이 작동하려면
false를 반환하세요.
}
휴식;
}
}
// nextStepIndex를 사용하면 사용자가 특정 단계에서 *시작하려고* 할 때 사용자를 가로챌 수 있습니다.
switch (ui.nextStepIndex) {
// in 이 경우 마법사의 마지막 단계에 대한 요약을 표시합니다.
case 4:
var oFormValues ​​= {
name: $("#name").val(),
email: $("#email").val(),
사용자 이름: $("#username").val(),
openid: 정의되지 않음
};
$("#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]");
oFormValues.openid = ($openid.length === 1) ? $openid.val() : $("#openid-other").val();
$("#summary-username").hide().children("td").text("");
$("#summary-openid").show().children("td").text(oFormValues.openid);
}
휴식;
}
});
// 사용자가 3단계에서 openid 링크를 클릭하면(제로 인덱스) 마법사가 openid 단계로 이동합니다.
$("#openid").click(function () {
$w.jWizard("changeStep", 3);
false 반환
});
// openid 라디오 버튼이 선택된 경우 `other` 텍스트 상자를 비웁니다.
$w.find("input:radio[name=openid]").change(function (event) {
$("#openid-other").val("")
});
// `other` openid 텍스트 상자를 사용하는 경우 라디오 버튼을 비웁니다.
$("#openid-other").change(function (event) {
if (this.value != "") {
$w.find("input:radio[name=openid]").removeAttr("checked")
}
});