用JavaScript实现的简单Wizard

今天分享一个自己几年前用JavaScript写的Wizard,代码不多,另外我也没有添加任何样式,因为毕竟如果有人要用一般还都是会设计自己的样式的。

下面是Wizard的JavaScript代码,代码比较简单,就不多做解释了,wizard.js代码内容如下:

  1. xx = {};  
  2. xx.wizard = {};  
  3.   
  4. /** 
  5.  * The Wizard Object constructor. 
  6.  * @param (Object) oConfig the object to initialize the Wizard Object. It  
  7.  * must include the following attributes: 
  8.  * (String)wizardNavigation The id of html element that used to contain navitaion links. 
  9.  * (String)wizardContent The id of html element that used to contain all wizard step elements. 
  10.  * (String)wizardController The id of html element that used to contain all controller button. 
  11.  * @return (Object) an instance of Wizard. 
  12.  */  
  13. xx.wizard.Wizard = function(oConfig) {  
  14.   
  15.     // Private attributes   
  16.       
  17.     /** The wizard navigation element. */  
  18.     var eleWizardNavigation = document.getElementById(oConfig.wizardNavigation);  
  19.       
  20.     /** The wizard steps content element. */  
  21.     var eleWizardContent = document.getElementById(oConfig.wizardContent);  
  22.       
  23.     /** The wizard controller element. */  
  24.     var eleWizardController = document.getElementById(oConfig.wizardController);  
  25.       
  26.     /** All WizardSteps list. */  
  27.     var steps = new Array();  
  28.       
  29.     /** Current selected WizardStep. */  
  30.     var curStep;  
  31.       
  32.     /** An instance of WizardNavigation class is used to switch between steps. */  
  33.     var wizardNavigation;  
  34.       
  35.     /** An instance of WizardController class is used to contains controller buttons. */  
  36.     var wizardController;  
  37.       
  38.     /** The reference to current Wizard object. */  
  39.     var thiz = this;  
  40.       
  41.     // Public methods   
  42.       
  43.     /** 
  44.      * Add a WizardStep to steps list. 
  45.      * @param (Object)step An instance of WizardStep. 
  46.      * @return (void) 
  47.      */  
  48.     this.addStep = function(step) {  
  49.         steps.push(step)  
  50.     }  
  51.       
  52.     /** 
  53.      * Search an instance of WizardStep with given id of WizardStep. If cannot 
  54.      * find return null. 
  55.      * @param (String)stepId The id of WizardStep instance. 
  56.      * @return (Object) An instance of WizardStep. 
  57.      */  
  58.     this.findStep = function(stepId) {  
  59.         for (var idx = 0; idx < steps.length; idx++) {  
  60.             if (stepId == steps[idx].getId()) {  
  61.                 return steps[idx];  
  62.             }  
  63.         }  
  64.         return null;  
  65.     }  
  66.   
  67.     /** 
  68.      * Get the index location of the WizardStep in step list with given id of  
  69.      * WizardStep instance. If cannot find it, return -1. 
  70.      * @param (String)stepId The id of WizardStep instance. 
  71.      * @return (int) The index location. 
  72.      */  
  73.     this.getStepIndex = function(stepId) {  
  74.         for (var idx = 0; idx < steps.length; idx++){  
  75.             var step = steps[idx];  
  76.             if( step.getId() == stepId ) {  
  77.                 return idx;  
  78.             }  
  79.         }  
  80.         return -1;  
  81.     }  
  82.       
  83.     /** 
  84.      * Remove all WizardStep instancs from step list. 
  85.      * @return (void) 
  86.      */  
  87.     this.removeAllSteps = function() {  
  88.         for (var idx = 0; idx < steps.length; idx++){  
  89.             var step = steps[idx];  
  90.             step = null;  
  91.         }  
  92.         steps = new Array();  
  93.     }  
  94.       
  95.     /** 
  96.      * Move to previous WizardStep. 
  97.      * @return (void) 
  98.      */  
  99.     this.moveToPrevious = function() {  
  100.         var idx = thiz.getStepIndex(curStep.getId());  
  101.         if( idx > 0 ) {  
  102.             var preStep = steps[idx - 1];  
  103.             thiz.moveTo(preStep.getId());  
  104.         }  
  105.     }  
  106.       
  107.     /** 
  108.      * Move to next WizardStep. 
  109.      * @return (void) 
  110.      */  
  111.     this.moveToNext = function() {  
  112.         var idx = thiz.getStepIndex(curStep.getId());  
  113.         if( idx < steps.length - 1 ) {  
  114.             var nextStep = steps[idx + 1];  
  115.             thiz.moveTo(nextStep.getId());  
  116.         }  
  117.     }  
  118.       
  119.     /** 
  120.      * Move to the WizardStep that has given id of WizardStep. 
  121.      * @param (String)stepId The id of WizardStep instance. 
  122.      * @return (void) 
  123.      */  
  124.     this.moveTo = function(stepId) {  
  125.         var step = thiz.findStep(stepId);  
  126.           
  127.         wizardNavigation.setSelected(step);  
  128.         wizardNavigation.refresh();  
  129.           
  130.         wizardController.setSelected(step);  
  131.         wizardController.refresh();  
  132.   
  133.         for (var i = 0; i < steps.length; i++){  
  134.             if( steps[i].getId() == stepId ) {  
  135.                 steps[i].setVisible(true);  
  136.                 curStep = steps[i];  
  137.             } else {  
  138.                 steps[i].setVisible(false);  
  139.             }  
  140.         }  
  141.     }  
  142.       
  143.     /** 
  144.      * Render the wizard object to page. 
  145.      */  
  146.     this.render = function() {  
  147.         curStep = steps[0];  
  148.         steps[0].setVisible(true);  
  149.           
  150.         wizardNavigation = new xx.wizard.WizardNavigation({wizard: thiz, steps: steps});  
  151.         wizardNavigation.render(eleWizardNavigation);  
  152.           
  153.         wizardController = new xx.wizard.WizardController({wizard: thiz, steps: steps});  
  154.         wizardController.render(eleWizardController);  
  155.     }  
  156.   
  157.     /** 
  158.      * A util method to generate a controller button. 
  159.      * @param (String)id The id of button. 
  160.      * @param (String)name The name of button. 
  161.      * @param (String)value The value of button. 
  162.      * @param (Function)clickHandler The callback function for click this buttion. 
  163.      * @return (Element) An html element. 
  164.      */  
  165.     this.generateButton = function(id, name, value, clickHandler) {  
  166.         var eleBtn = document.createElement("input");  
  167.         eleBtn.type = 'button';  
  168.         eleBtn.id = id;  
  169.         eleBtn.name = name;  
  170.         eleBtn.value = value;  
  171.         eleBtn.onclick = clickHandler;  
  172.         return eleBtn;  
  173.     }  
  174. }  
  175.   
  176. xx.wizard.WizardNavigation = function(oConfig) {  
  177.     var wizard = oConfig.wizard;  
  178.     var steps = oConfig.steps;  
  179.     var selectedStep;  
  180.     var eleParent;  
  181.       
  182.     this.render = function(ele) {  
  183.         if (eleParent == null) {  
  184.             eleParent = ele;  
  185.         }  
  186.         var eleUL = document.createElement("ul");  
  187.         if (selectedStep == null) {  
  188.             selectedStep = steps[0];  
  189.         }  
  190.           
  191.         var selectedStepIdx = 0;  
  192.         for (var idx = 0; idx < steps.length; idx++){  
  193.             if (steps[idx].getId() == selectedStep.getId()) {  
  194.                 selectedStepIdx = idx;  
  195.                 break;  
  196.             }  
  197.         }  
  198.         for (var idx = 0; idx < steps.length; idx++){  
  199.             var eleLI = document.createElement("li");  
  200.             var className = ''  
  201.             if (steps[idx].getId() == selectedStep.getId()) {  
  202.                 className += ' selected';  
  203.             }  
  204.             eleLI.className = className;  
  205.             var eleSpan = document.createElement("span");  
  206.             if (idx < selectedStepIdx) {  
  207.                 var eleLink = document.createElement("a");  
  208.                 eleLink.href = '#';  
  209.                 var fnCallback = function(wizard, step) {  
  210.                     return function() {  
  211.                         var navigationCallback = step.getNavigationCallback();  
  212.                         if (navigationCallback != null) {  
  213.                             navigationCallback();  
  214.                         } else {  
  215.                             wizard.moveTo(step.getId());  
  216.                         }  
  217.                     };  
  218.                 }(wizard, steps[idx]);  
  219.                 eleLink.onclick = fnCallback;  
  220.                 eleLink.innerHTML = steps[idx].getTitle();  
  221.                 eleSpan.appendChild(eleLink);  
  222.             } else {  
  223.                 eleSpan.innerHTML = steps[idx].getTitle();  
  224.             }  
  225.             eleLI.appendChild(eleSpan);  
  226.             eleUL.appendChild(eleLI);  
  227.         }  
  228.         ele.appendChild(eleUL);  
  229.     }  
  230.       
  231.     this.refresh = function() {  
  232.         var childNodes = eleParent.childNodes;  
  233.         for(var idx = childNodes.length - 1 ; idx >= 0 ; idx-- ) {  
  234.             eleParent.removeChild(childNodes[idx]);  
  235.         }  
  236.         this.render(eleParent);  
  237.     }  
  238.       
  239.     this.setSelected = function(oWizardStep) {  
  240.         selectedStep = oWizardStep;  
  241.     }  
  242. }  
  243.   
  244. xx.wizard.WizardController = function(oConfig) {  
  245.     var wizard = oConfig.wizard;  
  246.     var steps = oConfig.steps;  
  247.     var selectedStep;  
  248.     var eleParent;  
  249.       
  250.     this.render = function(parent) {  
  251.         eleParent = parent;  
  252.         var controlButtons = steps[0].getControlButtons();  
  253.         if (controlButtons != null) {  
  254.             for(var idx = 0; idx < controlButtons.length; idx ++) {  
  255.                 eleParent.appendChild(controlButtons[idx]);  
  256.             }  
  257.         }  
  258.     }  
  259.       
  260.     this.refresh = function() {  
  261.         var childNodes = eleParent.childNodes;  
  262.         for(var idx = childNodes.length - 1 ; idx >= 0 ; idx-- ) {  
  263.             eleParent.removeChild(childNodes[idx]);  
  264.         }  
  265.         var controlButtons = selectedStep.getControlButtons();  
  266.         if (controlButtons != null) {  
  267.             for(var idx = 0; idx < controlButtons.length; idx ++) {  
  268.                 eleParent.appendChild(controlButtons[idx]);  
  269.             }  
  270.         }  
  271.     }  
  272.       
  273.     this.setSelected = function(oWizardStep) {  
  274.         selectedStep = oWizardStep;  
  275.     }  
  276. }  
  277.   
  278. /** 
  279.  * The constructor of WizardStep class. 
  280.  * @param (Object)oConfig the object to initialize the WizardStep Object. It  
  281.  * must include the following attributes: 
  282.  * (String)id The identity id of WizardStep object 
  283.  * (String)name The id of WizardStep object. 
  284.  * (String)title The title of WizardStep object that is used to display in navigation area. 
  285.  * (Array)controlButtons The control buttons of WizardStep that are used to display in controller area. 
  286.  * (Function)navigationCallback The navigation callback function that will be used on click the step title in navigation area. 
  287.  * @return (Object) an instance of WizardStep. 
  288.  */  
  289. xx.wizard.WizardStep = function(oConfig) {  
  290.     var id = oConfig.id;  
  291.     var name = oConfig.name;  
  292.     var title = oConfig.title;  
  293.     var controlButtons = oConfig.controlButtons;  
  294.     var navigationCallback = oConfig.navigationCallback;  
  295.   
  296.     this.getId = function() {  
  297.         return id;  
  298.     }  
  299.       
  300.     this.getName = function() {  
  301.         return name;  
  302.     }  
  303.       
  304.     this.getTitle = function() {  
  305.         return title;  
  306.     }  
  307.       
  308.     this.isVisible = function() {  
  309.         return document.getElementById(id).style.display;  
  310.     }  
  311.       
  312.     this.setVisible = function(visible) {  
  313.         document.getElementById(id).style.display = (visible)? 'block':'none';  
  314.     }  
  315.       
  316.     this.getControlButtons = function() {  
  317.         return controlButtons;  
  318.     }  
  319.       
  320.     this.getNavigationCallback = function() {  
  321.         return navigationCallback;  
  322.     }  
  323. }  

相关推荐