Home > Web Front-end > JS Tutorial > Use javascript to make a general wizard_javascript skills

Use javascript to make a general wizard_javascript skills

WBOY
Release: 2016-05-16 18:02:47
Original
967 people have browsed it

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

Copy code The code is as follows :



Gift Recommendation Guide










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($("")
        .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 <= 0)
        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.
        Related labels:
        source:php.cn
        Statement of this Website
        The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
        Popular Tutorials
        More>
        Latest Downloads
        More>
        Web Effects
        Website Source Code
        Website Materials
        Front End Template