Use javascript to make a general wizard_javascript skills

1. Interface design
index.html: only provides a placeholder for the wizard display position

Copy code The code is as follows :

style.css: By default, the wizard has a title presented by h2, a main content presented by ul, and a button bar presented by div. We simply designed their default appearance. In actual application, you can Feel free to embellish them.

Copy code The code is as follows:

body{
margin:0;
}
/*wizard container*/
#wizard{
height:400px;
width:600px;
background-color:#999;
}
/*wizard The main content is displayed in a list*/
#wizard ul{
margin:10px;
height:80%;
}
/*Display list content horizontally*/
# wizard li{
display:inline-block;
margin:10px;
cursor:pointer;
}
/*Title of the list*/
#wizard h2{
margin:10px;
}
/*The function bar of the list, such as the back button*/
#wizard .bar{
margin:10px;
clear:both;
}

2. Prepare each step

The wizard can be divided into each step. Each step needs to present content, capture user selections, provide titles and other functions. We make each step its own You are responsible for your own affairs, but you must comply with some contracts stipulated by us.

Each step is represented by a function. The first parameter data_key is the keyword to select the data of this step. It is generally used to determine the result of the previous step to display the data in the next step. The second parameter result_callback It is a callback function, which is called when the result is obtained in this step. It is used to communicate with the wizard class. After getting the result of the previous step, the wizard class stores the result and jumps to the next step.

This function returns a tuple, the first element is the title of this step, and the second element is the UI of the main part of this step.

Our example is a gift recommendation system, which is divided into three steps. The first step is to select the gift recipient, and the second step is to select the keyword. The selection result of the first step will affect the display of the second step. Select the price range in three steps. The following is the implementation of the code. The drawing interface and event capture use jquery to simplify the operation.

Copy code The code is as follows:

function step1(data_key, result_callback){
var targets = ['girlfriend','boyfriend','father','mom','child'];
var warpper = $('

')
$ .each(targets, function(k,v){
$('

' v '

').click(function(){result_callback(v)}).appendTo(warpper) ;
});
return ['Step 1: Please choose the recipient of the gift',warpper];
}
function step2(data_key, result_callback){
var tags = {
'Girlfriend': ['creative', 'cute', 'romantic', 'passion', 'practical', 'digital',
'self-made', 'plush toys', 'clothes', 'bag'],
'boyfriend':['men's products','warmth','practical','digital','creative','clothing'],
'father':[' Men's products','health','plants','clothing'],
'Mom':['warmth','health','creative','skin care','practical'],
'Kids' :['Toys','School Supplies','Practical','Digital']
};
var warpper = $('

')
$.each(tags[data_key], function(k,v){
$('

' v '

').click(function(){result_callback(v)}). appendTo(warpper);
});
return ['Step 2: Please select the keyword',warpper];
}
function step3(data_key, result_callback){
var price_level = ['cheap', 'ordinary', 'slightly expensive', 'expensive'];
var wrapper = $('

')
$.each(price_level, function (k,v){
$('

' v '

').click(function(){result_callback(v)}).appendTo(warpper);
}) ;
return ['Step 3: Please select a price range',warpper];
}

3. Implementation of the wizard class

The wizard class should set the DOM element where the wizard is located, the list of steps to be executed, the callback to be executed after the wizard is completed, and the wizard should also provide methods for the previous step and the next step. So we use a class to represent the wizard, pass in the DOM container, step list and callback function in the constructor, and use prototype to add three methods to the class. Render is used to present the UI of a certain step and push it to the next step in the callback of the collected results of this step. If this step is the last step, the callback function of the completion of the wizard execution is called.

The other two next and back functions are to execute the previous step and the next step respectively. These two functions use the private variables of index to maintain the state of the entire wizard

Copy code The code is as follows:

function Wizard(container, steps, callback){
this.container = container; //Wizard container
this.steps = steps; //Wizard steps
this.callback = callback; //Callback after the wizard is executed
this.collect_data = []; //Save the results of each step of the wizard
this.index = -1; //Which step is currently executed
}
//Draw a certain step
Wizard.prototype.render = function(step, this_result){
var me = this;
//Execute this step and get the UI of this step
var to_append = step(this_result,function(result){
me.collect_data.push(result); //Collect this step Result
//The callback function is called when the wizard is completed, otherwise the next step is executed
if(me.collect_data.length == me.steps.length)
me.callback(me.collect_data);
else
me.next(result);
});
//Draw the UI for this step
this.container.empty();
this.container.append("< ;h2>" to_append[0] "");
this.container.append(to_append[1]);
if(this.index > 0){
// Back Button
this.container.append($("

Back

")
.click(function(){me.back()}
));
}
}
//Execute 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 );
}
//Go back to the previous step
Wizard.prototype.back = function(){
if(this.index return;
var step = this.steps[--this.index];
//The step returns to the previous step, but the data of the previous step needs to be determined by the result of the previous step
this.collect_data = this.collect_data.slice( 0, this.index);
this.render(step, this.collect_data[this.index - 1]);
}

4. Summary

This wizard has a simple structure and is highly customizable. It combines the functional programming features and object-oriented features of JavaScript, reflecting the power and convenience of JavaScript.

There is still some coupling between the interface drawing part in the wizard class and the interface drawing part in the step function. If we continue to refactor, we can abstract all the interface drawing parts together to make interface changes more convenient.