1. Interface design
Index.html: Only a placeholder for the location where the wizard is displayed
Copy Code code as follows:
<title> Gift Recommendation Guide </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Wizard.js" type= "Text/javascript" ></script>
<body>
<div id= "Wizard" ></div>
</body>
STYLE.CSS: By default, the wizard has a H2 rendered title, a main content of the UL present, a div-presented button bar, we simply designed their default appearance, the actual application of the people can be free to beautify them.
Copy Code code as follows:
body{
margin:0;
}
/* Guide Container * *
#wizard {
height:400px;
width:600px;
Background-color: #999;
}
/* The main content of the wizard, use the list to show * *
#wizard ul{
margin:10px;
height:80%;
}
/* Horizontal Display list content * *
#wizard li{
Display:inline-block;
margin:10px;
Cursor:pointer;
}
/* The title of the list/*
#wizard h2{
margin:10px;
}
/* List of functions, such as the return button * *
#wizard. bar{
margin:10px;
Clear:both;
}
2. Prepare each step
Wizards can be divided into each step, each step needs to render content, capture user choice, provide the title and other functions, we let each step to take charge of their own things, but to meet our provisions of some contracts.
Each step is represented by a function, the first parameter data_key is a keyword that selects the data for this step, generally the result of the previous step determines the situation where the next step shows the data, and the second parameter result_callback is a callback function, which is called when the result is obtained in this step. It is used to communicate with the wizard class, which stores the results after the results of the previous step and jumps to the next step.
The function returns a two-tuple, the first element is the title of this step, and the second element is the UI for the body part of this step.
Our example is a gift recommendation system, a total of three steps, the first step to choose the Gift object, the second choice of keywords, where the first step of the selection results will affect the second step, the third step to select the price range, the following is the implementation of the Code, which draw the interface and event capture using jquery to simplify the operation.
Copy Code code as follows:
function Step1 (Data_key, Result_callback) {
var targets = [' girlfriend ', ' boyfriend ', ' father ', ' mother ', ' child '];
var warpper = $ (' <ul></ul> ')
$.each (Targets, function (k,v) {
$ (' <li> ' +v+ ' </li> '). Click (function () {Result_callback (v)}). Appendto (Warpper);
});
return [' First step: Please choose the object of Gift ', warpper];
}
function Step2 (Data_key, Result_callback) {
var tags = {
' Girlfriend ': [' creative ', ' cute ', ' romantic ', ' passion ', ' practical ', ' digital ',
' Homemade ', ' plush toys ', ' clothes ', ' bags ',
' Boyfriend ': [' Men's supplies ', ' warm ', ' practical ', ' digital ', ' creative ', ' clothing '],
' Father ': [' Men's supplies ', ' health ', ' plants ', ' clothing '],
' Mom ': [' warm ', ' healthy ', ' creative ', ' skincare ', ' practical '],
' Children ': [' toys ', ' Learning articles ', ' practical ', ' digital ']
};
var warpper = $ (' <ul></ul> ')
$.each (Tags[data_key], function (k,v) {
$ (' <li> ' +v+ ' </li> '). Click (function () {Result_callback (v)}). Appendto (Warpper);
});
return [' Second step: Please select keywords ', warpper];
}
function Step3 (Data_key, Result_callback) {
var price_level = [' cheap ', ' ordinary ', ' slightly expensive ', ' valuable '];
var warpper = $ (' <ul></ul> ')
$.each (Price_level, function (k,v) {
$ (' <li> ' +v+ ' </li> '). Click (function () {Result_callback (v)}). Appendto (Warpper);
});
return [' Third step: Please select Price range ', Warpper];
}
3, the implementation of the wizard class
Wizard class to set the DOM element in which the wizard is located, the list of steps to perform, the callback that is performed after the wizard completes, and the wizard should provide the previous and next steps, so we use a class to represent the wizard, the DOM container, the step list, and the callback function in the constructor. Add three methods to the class with prototype. Render is used to render a step of the UI and to the next step in the callback that collects the results of this procedure, and if this step is the last step, invoke the wizard to perform the completed callback function.
The other two next and back functions are to perform the previous and next steps, and these two functions use the private variables of index to maintain the entire wizard state
Copy Code code as follows:
function Wizard (container, steps, callback) {
This.container = container; Wizard Container
This.steps = steps; Wizard steps
This.callback = callback; The callback that the wizard finishes executing
This.collect_data = []; Save results for each step of the wizard
This.index =-1; Currently executing in that step
}
Draw a step
Wizard.prototype.render = function (step, This_result) {
var me = this;
Follow this step and get the UI for the step
var to_append = Step (this_result,function) {
Me.collect_data.push (result); Collect the results of this step
Call the callback function when the wizard finishes executing, or else perform the next step
if (me.collect_data.length = = me.steps.length)
Me.callback (Me.collect_data);
Else
Me.next (result);
});
Draw UI for this step
This.container.empty ();
This.container.append ("This.container.append (to_append[1]);
if (This.index > 0) {
Back button
This.container.append ($ ("<div class= ' bar ' ><a href= ' javascript:; ' > Back </a></div> ")
. Click (function () {Me.back ()}
));
}
}
Perform the next step
Wizard.prototype.next = function (This_result) {
if (This.index >= this.steps.length-1)
Return
var step = This.steps[++this.index];
This.render (Step,this_result);
}
Back to the previous step
Wizard.prototype.back = function () {
if (this.index <= 0)
Return
var step = This.steps[--this.index];
Step back to the previous step, but the data in the previous step needed to be decided by the result
This.collect_data = This.collect_data.slice (0, This.index);
This.render (step, this.collect_data[this.index-1]);
}
4. Summary
This wizard is simple in structure, strong in customization, combines the functional programming features of JavaScript with object-oriented features, and embodies the power and convenience of JavaScript.
The part of the interface drawn in the wizard class and the part of the step function in the interface drawing or some coupling, continue to refactor, can be all the parts of the drawing interface and then abstract together, make the interface change more convenient.
