I will not post the code of my current project. I will directly move the author's example, because the changes are not great. As long as we make some changes, we will be able to meet our own needs.
Click here to download the original article address.
The author's official website is only in English. If you are good at English, you can read the original article for fear of incorrect expression.
I don't know if my shoes are usually used in Wizard development? Someone asks what is wizard-based development? In fact, it is very simple, that is, let the user complete a step, then click Next to complete a step, and then click Next. In this way, according to my master, the user experience can be improved.
OK. Let's take a simple example:
Example 1:
1.1 of course. Since it is JQuery, you must reference the JQuery library. The related class libraries can be listed above.
JQuery Class and Style
Copy codeThe Code is as follows: <! -- Jquery ui theme -->
<Link rel = "stylesheet" href = "/path/to/jquery-ui.css"/>
<! -- Required CSS basics -->
<Link rel = "stylesheet" href = "/path/to/jWizard.base.css"/>
<! -- Duh -->
<Script type = "text/javascript" src = "/path/to/jquery. js"> </script>
<! -- At least the widget factory -->
<Script type = "text/javascript" src = "/path/to/jquery-ui.js"> </script>
<! -- And the plugin itself -->
<Script type = "text/javascript" src = "/path/to/jWizard. min. js"> </script>
1.2 and then began to write HTML code, which is also very simple.
HTML CodeCopy codeThe Code is as follows: <form id = "wizard-form" class = "jWizard">
<Fieldset>
<Legend> Beginning </legend>
<P> Are you sure you want to begin? Press "Next" to proceed? </P>
</Fieldset>
<Fieldset>
<Legend> Middle </legend>
<P> Are you sure you want? </P>
<P> You can still go back. Or press "Next" again to confirm. </p>
</Fieldset>
<Fieldset>
<Legend> End </legend>
<P> Done, click "Finish" to end </p>
</Fieldset>
</Form>
<! -- Can also just be divs with title attributes -->
<Div id = "wizard-div" class = "jWizard">
<Div title = "Beginning">
<P> Are you sure you want to begin? Press "Next" to proceed? </P>
</Div>
<Div title = "Middle">
<P> Are you sure you want? </P>
<P> You can still go back. Or press "Next" again to confirm. </p>
</Div>
<Div title = "End">
<P> Done, click "Finish" to end </p>
</Div>
</Div>
You can add the corresponding div in the preceding HTML code, but do not forget to assign the title value to the outmost.
1.3. js started calling.
JS CallCopy codeThe Code is as follows: $ (". jWizard"). jWizard ({
MenuEnable: true,
Counter :{
Enable: true,
Progressbar: true
},
Effects: {enable: true}
});
OK, so far, the above basic steps are implemented. The effect is as follows:
Example 2: add an event to next
In my first version, I started to upload files and verify files. Second, I put a button on the page and then triggered its javascript code. This can meet the needs of basic functions, but it seriously damages the user experience. Because the current users are very lazy and can do less, they will never do more. Therefore, if you put a button and the user does not want to click it, and then click next, the user will not get the desired user and an error will be reported.
Therefore, we can integrate some operations into Next, which makes it easy and easy, and the pages become neat and generous.
The rest of the code can remain unchanged. Now I will focus on the event mechanism in js. The Code is as follows:
Copy codeThe Code is as follows: var $ w = $ ("# events-test ");
$ W. validate ({errorClass: "ui-state-error-text "});
$ W
. JWizard ({
Buttons :{
CancelType: "reset", // The Action triggered when you click the "Cancel" button. For example, in the project, it is to jump to the first page and start again.
FinishType: "submit" // when you click "finish" in the last step, the starting action is submitted.
},
// The Action triggered when you click the "Cancel" button. For example, in the project, I jumped to the first page and started again.
Cancel: function (event, ui ){
$ W. jWizard ("firstStep ");
}, // The Action triggered when you click previous. For example, in my project, when all emails are sent, the user's previous page cannot be sent, so I want to disable the previous page function. Very simple;
Previous: function (event, ui ){
// If (ui. currentStepIndex = 7) {return false. 7 refers to the sequence number of your div. It starts from 0.
},
Next: function (event, ui ){
// The same is true here. This is the case where the next page is controlled. For example, in my project, a data upload task cannot be uploaded if no data is uploaded. In this case, you can set a bool value first, and then,
If (fileUploadComplete) {$. get ("@ Url. action ("VerificationSchema", "Home") ", // the children's shoes who learn MVC here should be familiar with the VerificationSchema function (data) method under action home) {// obtain the returned data var newData = eval (data); // convert schemaVerification = newData because of json. hasErrors; if (newData. hasErrors) {var listing1 = document. getElementById ("listing1"); listing1.innerHTML = "<font color = 'red' size = '20px '> Congruations. please go on. </font> ";} else {document. getElementById ("ErrorNotification "). innerHTML = "Sorry. your Schema wrong, please check it. "; var listing1 = document. getElementById ("listing1"); listing1.innerHTML = newData. result ;}}, "json") ;}else {// the prompt alert ("Please firstly Upload the Excel File you need") is displayed 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 very important, because here is the implementation method of the corresponding div, you only need to integrate the javascript code of the corresponding module here.
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 particle 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]");
OFormValues. openid = ($ openid. length = 1 )? $ Openid. val (): $ ("# openid-other"). val ();
$ ("# Summary-username"). hide (). children ("td"). text ("");
$ ("# Summary-openid"). show (). children ("td"). text (oFormValues. openid );
}
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 (){
$ W. jWizard ("changeStep", 3 );
Return false;
});
// If an openid radio button is checked, blank out the 'other' textbox
$ W. find ("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 (this. value! = ""){
$ W. find ("input: radio [name = openid]"). removeAttr ("checked ");
}
});
Sum, why did my sogou suddenly become useless.
Even if the above is my experience, I will not talk about it. It's time to eat. If you have any questions when developing your shoes, you can discuss them together, make common progress.
The specific effect is here.
