用JavaScript实现的简单Wizard

本文链接：http://blog.csdn.net/kongxx/article/details/7343529

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

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

xx = {}; xx.wizard = {}; /** * The Wizard Object constructor. * @param (Object) oConfig the object to initialize the Wizard Object. It * must include the following attributes: * (String)wizardNavigation The id of html element that used to contain navitaion links. * (String)wizardContent The id of html element that used to contain all wizard step elements. * (String)wizardController The id of html element that used to contain all controller button. * @return (Object) an instance of Wizard. */ xx.wizard.Wizard = function(oConfig) { // Private attributes /** The wizard navigation element. */ var eleWizardNavigation = document.getElementById(oConfig.wizardNavigation); /** The wizard steps content element. */ var eleWizardContent = document.getElementById(oConfig.wizardContent); /** The wizard controller element. */ var eleWizardController = document.getElementById(oConfig.wizardController); /** All WizardSteps list. */ var steps = new Array(); /** Current selected WizardStep. */ var curStep; /** An instance of WizardNavigation class is used to switch between steps. */ var wizardNavigation; /** An instance of WizardController class is used to contains controller buttons. */ var wizardController; /** The reference to current Wizard object. */ var thiz = this; // Public methods /** * Add a WizardStep to steps list. * @param (Object)step An instance of WizardStep. * @return (void) */ this.addStep = function(step) { steps.push(step) } /** * Search an instance of WizardStep with given id of WizardStep. If cannot * find return null. * @param (String)stepId The id of WizardStep instance. * @return (Object) An instance of WizardStep. */ this.findStep = function(stepId) { for (var idx = 0; idx < steps.length; idx++) { if (stepId == steps[idx].getId()) { return steps[idx]; } } return null; } /** * Get the index location of the WizardStep in step list with given id of * WizardStep instance. If cannot find it, return -1. * @param (String)stepId The id of WizardStep instance. * @return (int) The index location. */ this.getStepIndex = function(stepId) { for (var idx = 0; idx < steps.length; idx++){ var step = steps[idx]; if( step.getId() == stepId ) { return idx; } } return -1; } /** * Remove all WizardStep instancs from step list. * @return (void) */ this.removeAllSteps = function() { for (var idx = 0; idx < steps.length; idx++){ var step = steps[idx]; step = null; } steps = new Array(); } /** * Move to previous WizardStep. * @return (void) */ this.moveToPrevious = function() { var idx = thiz.getStepIndex(curStep.getId()); if( idx > 0 ) { var preStep = steps[idx - 1]; thiz.moveTo(preStep.getId()); } } /** * Move to next WizardStep. * @return (void) */ this.moveToNext = function() { var idx = thiz.getStepIndex(curStep.getId()); if( idx < steps.length - 1 ) { var nextStep = steps[idx + 1]; thiz.moveTo(nextStep.getId()); } } /** * Move to the WizardStep that has given id of WizardStep. * @param (String)stepId The id of WizardStep instance. * @return (void) */ this.moveTo = function(stepId) { var step = thiz.findStep(stepId); wizardNavigation.setSelected(step); wizardNavigation.refresh(); wizardController.setSelected(step); wizardController.refresh(); for (var i = 0; i < steps.length; i++){ if( steps[i].getId() == stepId ) { steps[i].setVisible(true); curStep = steps[i]; } else { steps[i].setVisible(false); } } } /** * Render the wizard object to page. */ this.render = function() { curStep = steps[0]; steps[0].setVisible(true); wizardNavigation = new xx.wizard.WizardNavigation({wizard: thiz, steps: steps}); wizardNavigation.render(eleWizardNavigation); wizardController = new xx.wizard.WizardController({wizard: thiz, steps: steps}); wizardController.render(eleWizardController); } /** * A util method to generate a controller button. * @param (String)id The id of button. * @param (String)name The name of button. * @param (String)value The value of button. * @param (Function)clickHandler The callback function for click this buttion. * @return (Element) An html element. */ this.generateButton = function(id, name, value, clickHandler) { var eleBtn = document.createElement("input"); eleBtn.type = 'button'; eleBtn.id = id; eleBtn.name = name; eleBtn.value = value; eleBtn.onclick = clickHandler; return eleBtn; } } xx.wizard.WizardNavigation = function(oConfig) { var wizard = oConfig.wizard; var steps = oConfig.steps; var selectedStep; var eleParent; this.render = function(ele) { if (eleParent == null) { eleParent = ele; } var eleUL = document.createElement("ul"); if (selectedStep == null) { selectedStep = steps[0]; } var selectedStepIdx = 0; for (var idx = 0; idx < steps.length; idx++){ if (steps[idx].getId() == selectedStep.getId()) { selectedStepIdx = idx; break; } } for (var idx = 0; idx < steps.length; idx++){ var eleLI = document.createElement("li"); var className = '' if (steps[idx].getId() == selectedStep.getId()) { className += ' selected'; } eleLI.className = className; var eleSpan = document.createElement("span"); if (idx < selectedStepIdx) { var eleLink = document.createElement("a"); eleLink.href = '#'; var fnCallback = function(wizard, step) { return function() { var navigationCallback = step.getNavigationCallback(); if (navigationCallback != null) { navigationCallback(); } else { wizard.moveTo(step.getId()); } }; }(wizard, steps[idx]); eleLink.onclick = fnCallback; eleLink.innerHTML = steps[idx].getTitle(); eleSpan.appendChild(eleLink); } else { eleSpan.innerHTML = steps[idx].getTitle(); } eleLI.appendChild(eleSpan); eleUL.appendChild(eleLI); } ele.appendChild(eleUL); } this.refresh = function() { var childNodes = eleParent.childNodes; for(var idx = childNodes.length - 1 ; idx >= 0 ; idx-- ) { eleParent.removeChild(childNodes[idx]); } this.render(eleParent); } this.setSelected = function(oWizardStep) { selectedStep = oWizardStep; } } xx.wizard.WizardController = function(oConfig) { var wizard = oConfig.wizard; var steps = oConfig.steps; var selectedStep; var eleParent; this.render = function(parent) { eleParent = parent; var controlButtons = steps[0].getControlButtons(); if (controlButtons != null) { for(var idx = 0; idx < controlButtons.length; idx ++) { eleParent.appendChild(controlButtons[idx]); } } } this.refresh = function() { var childNodes = eleParent.childNodes; for(var idx = childNodes.length - 1 ; idx >= 0 ; idx-- ) { eleParent.removeChild(childNodes[idx]); } var controlButtons = selectedStep.getControlButtons(); if (controlButtons != null) { for(var idx = 0; idx < controlButtons.length; idx ++) { eleParent.appendChild(controlButtons[idx]); } } } this.setSelected = function(oWizardStep) { selectedStep = oWizardStep; } } /** * The constructor of WizardStep class. * @param (Object)oConfig the object to initialize the WizardStep Object. It * must include the following attributes: * (String)id The identity id of WizardStep object * (String)name The id of WizardStep object. * (String)title The title of WizardStep object that is used to display in navigation area. * (Array)controlButtons The control buttons of WizardStep that are used to display in controller area. * (Function)navigationCallback The navigation callback function that will be used on click the step title in navigation area. * @return (Object) an instance of WizardStep. */ xx.wizard.WizardStep = function(oConfig) { var id = oConfig.id; var name = oConfig.name; var title = oConfig.title; var controlButtons = oConfig.controlButtons; var navigationCallback = oConfig.navigationCallback; this.getId = function() { return id; } this.getName = function() { return name; } this.getTitle = function() { return title; } this.isVisible = function() { return document.getElementById(id).style.display; } this.setVisible = function(visible) { document.getElementById(id).style.display = (visible)? 'block':'none'; } this.getControlButtons = function() { return controlButtons; } this.getNavigationCallback = function() { return navigationCallback; } }
以下是测试代码，包括一个js文件和一个html文件

mywizard.html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="expires" content="0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Wizard</title> <script type="text/javascript" src="wizard.js"></script> <script type="text/javascript" src="mywizard.js"></script> <style type="text/css"> .myWizardContent { width: 400px; height: 300px; margin: 25px; background-color: #DDD; display: none; } .myWizardController { margin: 25px; clear: both; } .wizard { margin: 5px 5px 5px -15px; } .wizard ul li{ float:left; height:48px; list-style: none outside none; } .wizard ul li span{ display:block; height:20px; width:100px; padding:5px; font-size:10pt; font-weight:bold; text-align: center; } .wizard ul li.selected span{ background-color:#CCC; color:#036; } </style> </head> <body οnlοad="init();"> <div id="divWizardNavigation" class="wizard"></div> <div id="divWizardContent" style="clear: both; padding-top: 10px;"> <div id="step1" class="myWizardContent"><h3>Step 1: ...</h3></div> <div id="step2" class="myWizardContent"><h3>Step 2: ...</h3></div> <div id="step3" class="myWizardContent"><h3>Step 3: ...</h3></div> <div id="step4" class="myWizardContent"><h3>Step 4: ...</h3></div> <div id="step5" class="myWizardContent"><h3>Step 5: ...</h3></div> </div> <div id="divWizardController" class="myWizardController"></div> </body> </html>
mywizard.js代码内容：

var wizard = null; function init() { wizard = new xx.wizard.Wizard({wizardNavigation: 'divWizardNavigation', wizardContent: 'divWizardContent', wizardController: 'divWizardController'}); var fnMoveToPrevious = function(wizard) { return function() { wizard.moveToPrevious(); }; }(wizard); var fnMoveToNext = function(wizard) { return function() { wizard.moveToNext(); }; }(wizard); var fnCancel = function() { alert('This is Cancel function!'); } var fnFinish = function() { alert('This is Finish function!'); } var fnSpecial = function() { alert('This is Special function!'); } wizard.addStep(new xx.wizard.WizardStep({id: 'step1', name: 'Step 1', title: 'Step 1', controlButtons: [ wizard.generateButton('step1_cancel', 'step1_cancel', 'Cancel', fnCancel), wizard.generateButton('step1_next', 'step1_next', 'Next', fnMoveToNext) ]})); wizard.addStep(new xx.wizard.WizardStep({id: 'step2', name: 'Step 2', title: 'Step 2', navigationCallback: function(wizard) { return function() { alert("It's cool!"); wizard.moveTo('step2'); }; }(wizard), controlButtons: [ wizard.generateButton('step2_cancel', 'step2_cancel', 'Cancel', fnCancel), wizard.generateButton('step2_pre', 'step2_pre', 'Previous', fnMoveToPrevious), wizard.generateButton('step2_next', 'step2_next', 'Next', fnMoveToNext), wizard.generateButton('step2_apecial', 'step2_apecial', 'Special Button', fnSpecial) ]})); wizard.addStep(new xx.wizard.WizardStep({id: 'step3', name: 'Step 3', title: 'Step 3', controlButtons: [ wizard.generateButton('step3_cancel', 'step3_cancel', 'Cancel',fnCancel), wizard.generateButton('step3_pre', 'step3_pre', 'Previous', fnMoveToPrevious), wizard.generateButton('step3_next', 'step3_next', 'Next', fnMoveToNext) ]})); wizard.addStep(new xx.wizard.WizardStep({id: 'step4', name: 'Step 4', title: 'Step 4', controlButtons: [ wizard.generateButton('step4_cancel', 'step4_cancel', 'Cancel', fnCancel), wizard.generateButton('step4_pre', 'step4_pre', 'Previous', fnMoveToPrevious), wizard.generateButton('step4_next', 'step4_next', 'Next', fnMoveToNext) ]})); wizard.addStep(new xx.wizard.WizardStep({id: 'step5', name: 'Step 5', title: 'Step 5', controlButtons: [ wizard.generateButton('step5_cancel', 'step5_cancel', 'Cancel', fnCancel), wizard.generateButton('step5_pre', 'step5_pre', 'Previous', fnMoveToPrevious), wizard.generateButton('step5_finish', 'step5_finish', 'Finish', fnFinish) ]})); wizard.render(); }
将此三个文件放到一个目录下，并在浏览器里运行mywizard.html，就可以看到Wizard的运行效果了。