1. Interface design
: Only a placeholder for the wizard display position is provided
<html>
<head>
<title>Gift Recommendation Guide</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="">
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
</head>
<body>
<div ></div>
</body>
</html>
: By default, there is a title presented by h2, a main content presented by ul, and a button bar presented by a div. We have simply designed their default appearance, so that in actual applications, everyone can freely beautify them.
body{
margin:0;
}
/*Wizard container*/
#wizard{
height:400px;
width:600px;
background-color:#999;
}
/*The main content of the wizard is displayed in the list*/
#wizard ul{
margin:10px;
height:80%;
}
/*Horizontal display list content*/
#wizard li{
display:inline-block;
margin:10px;
cursor:pointer;
}
/*Title of list*/
#wizard h2{
margin:10px;
}
/* function bar of the list, such as return button*/
#wizard .bar{
margin:10px;
clear:both;
}
2. Prepare for each step
The wizard can be divided into each step. Each step needs to present content, capture user selection, provide titles and other functions. We let each step be responsible for our own affairs, but it must comply with some of the contracts we stipulate.
Each step is represented by a function. The first parameter data_key is the keyword that selects the data of this step. It is generally used to determine the data displayed by the next step. The second parameter result_callback is a callback function, which is called when this step obtains the result. It is used to communicate with the wizard class. After obtaining the result of the previous step, the wizard class stores the result and jumps to the next step.
This function returns a binary, 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 object, and the second step is to select keywords. The first step is to affect the display of the second step, and the third step is to select the price range. The following is the implementation of the code, where jquery is used to simplify operations.
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 ['Step 1: Please select the gift object', wrapper];
}
function step2(data_key, result_callback){
var tags = {
'Girlfriend':['Creative','Cute','Romantic',' Passion','Practical','Digital',
'Homemade','Plush toy','Clothes','Backet'],
'Boyfriend':['Men's supplies','warm','practical','digital','creative','clothing'],
'Father' :['Men's Supplies','Healthy','Plant','Clothing'],
'Mom' :['warm','healthy','creative','skin care products','practical'],
'Child' :['Toys','School supplies','Practical','Digital']
};
var warpper = $('<ul></ul>')
$.each(tags[data_key], function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
});
return ['Step 2: Please select the keyword',wrapper];
}
function step3(data_key, result_callback){
var price_level = ['cheap','ordinary','slightly expensive','expensive'];
var warpper = $('<ul></ul>')
$.each(price_level, function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
});
return ['Step 3: Please select the price range', wrapper];
}
3. Implementation of wizard class
The wizard class needs to set the DOM element where the wizard is located, the list of steps to be executed, and the callback executed after the wizard is completed. The wizard should also provide the methods of the previous and next steps. Therefore, we use a class to represent the wizard, pass in the constructor DOM container, step list and callback function, and use prototype to add three methods to the class. The render is used to render the UI of a certain step and push it to the next step in the callback collected by this step. If this step is the last step, the wizard will execute the completed callback function.
The other two next and back functions perform the previous step and the next step respectively. These two functions use the index private variables to maintain the state of the entire wizard
function Wizard(container, steps, callback){
= container; //wizard container
= steps; //Wizard steps
= callback; //The wizard has completed execution callback
this.collect_data = []; //Save the results of each step of the wizard
= -1; //Which step is currently executed
}
//Draw a certain step
= 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 the results of this step
//Call the callback function when the wizard is finished, otherwise the next step will be executed
if(me.collect_data.length == )
(me.collect_data);
else
(result);
});
//Draw the UI of this step
();
("<h2>"+to_append[0]+"</h2>");
(to_append[1]);
if( > 0){
//Back button
($("<div class='bar'><a href='javascript:;'>back</a></div>")
.click(function(){()}
));
}
}
//Perform the next step
= function(this_result){
if( >= -1)
return;
var step = [++];
(step,this_result);
}
//Retreat to the previous step
= function(){
if( <= 0)
return;
var step = [--];
//Step go back 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, );
(step, this.collect_data[ - 1]);
}
4. Summary
This wizard is simple in structure and highly customizable. It combines the functional programming characteristics of javascript and the object-oriented characteristics, reflecting the power and convenience of javascript.
Among them, there is still some coupling between the interface drawn in the wizard class and the interface drawn in the step function. If you continue to reconstruct, you can abstract all the parts of the drawing interface together to make the interface more convenient to change.
: Only a placeholder for the wizard display position is provided
Copy the codeThe code is as follows:
<html>
<head>
<title>Gift Recommendation Guide</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="">
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
</head>
<body>
<div ></div>
</body>
</html>
: By default, there is a title presented by h2, a main content presented by ul, and a button bar presented by a div. We have simply designed their default appearance, so that in actual applications, everyone can freely beautify them.
Copy the codeThe code is as follows:
body{
margin:0;
}
/*Wizard container*/
#wizard{
height:400px;
width:600px;
background-color:#999;
}
/*The main content of the wizard is displayed in the list*/
#wizard ul{
margin:10px;
height:80%;
}
/*Horizontal display list content*/
#wizard li{
display:inline-block;
margin:10px;
cursor:pointer;
}
/*Title of list*/
#wizard h2{
margin:10px;
}
/* function bar of the list, such as return button*/
#wizard .bar{
margin:10px;
clear:both;
}
2. Prepare for each step
The wizard can be divided into each step. Each step needs to present content, capture user selection, provide titles and other functions. We let each step be responsible for our own affairs, but it must comply with some of the contracts we stipulate.
Each step is represented by a function. The first parameter data_key is the keyword that selects the data of this step. It is generally used to determine the data displayed by the next step. The second parameter result_callback is a callback function, which is called when this step obtains the result. It is used to communicate with the wizard class. After obtaining the result of the previous step, the wizard class stores the result and jumps to the next step.
This function returns a binary, 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 object, and the second step is to select keywords. The first step is to affect the display of the second step, and the third step is to select the price range. The following is the implementation of the code, where jquery is used to simplify operations.
Copy the codeThe code is 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 ['Step 1: Please select the gift object', wrapper];
}
function step2(data_key, result_callback){
var tags = {
'Girlfriend':['Creative','Cute','Romantic',' Passion','Practical','Digital',
'Homemade','Plush toy','Clothes','Backet'],
'Boyfriend':['Men's supplies','warm','practical','digital','creative','clothing'],
'Father' :['Men's Supplies','Healthy','Plant','Clothing'],
'Mom' :['warm','healthy','creative','skin care products','practical'],
'Child' :['Toys','School supplies','Practical','Digital']
};
var warpper = $('<ul></ul>')
$.each(tags[data_key], function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
});
return ['Step 2: Please select the keyword',wrapper];
}
function step3(data_key, result_callback){
var price_level = ['cheap','ordinary','slightly expensive','expensive'];
var warpper = $('<ul></ul>')
$.each(price_level, function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
});
return ['Step 3: Please select the price range', wrapper];
}
3. Implementation of wizard class
The wizard class needs to set the DOM element where the wizard is located, the list of steps to be executed, and the callback executed after the wizard is completed. The wizard should also provide the methods of the previous and next steps. Therefore, we use a class to represent the wizard, pass in the constructor DOM container, step list and callback function, and use prototype to add three methods to the class. The render is used to render the UI of a certain step and push it to the next step in the callback collected by this step. If this step is the last step, the wizard will execute the completed callback function.
The other two next and back functions perform the previous step and the next step respectively. These two functions use the index private variables to maintain the state of the entire wizard
Copy the codeThe code is as follows:
function Wizard(container, steps, callback){
= container; //wizard container
= steps; //Wizard steps
= callback; //The wizard has completed execution callback
this.collect_data = []; //Save the results of each step of the wizard
= -1; //Which step is currently executed
}
//Draw a certain step
= 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 the results of this step
//Call the callback function when the wizard is finished, otherwise the next step will be executed
if(me.collect_data.length == )
(me.collect_data);
else
(result);
});
//Draw the UI of this step
();
("<h2>"+to_append[0]+"</h2>");
(to_append[1]);
if( > 0){
//Back button
($("<div class='bar'><a href='javascript:;'>back</a></div>")
.click(function(){()}
));
}
}
//Perform the next step
= function(this_result){
if( >= -1)
return;
var step = [++];
(step,this_result);
}
//Retreat to the previous step
= function(){
if( <= 0)
return;
var step = [--];
//Step go back 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, );
(step, this.collect_data[ - 1]);
}
4. Summary
This wizard is simple in structure and highly customizable. It combines the functional programming characteristics of javascript and the object-oriented characteristics, reflecting the power and convenience of javascript.
Among them, there is still some coupling between the interface drawn in the wizard class and the interface drawn in the step function. If you continue to reconstruct, you can abstract all the parts of the drawing interface together to make the interface more convenient to change.