用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的运行效果了。

用JavaScript实现的简单Wizard相关推荐

javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
javascript worker 多线程简单示例
javascript worker 多线程简单示例项目结构主线程 index.html <!DOCTYPE html> <html lang="en"> ...
浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
为什么80%的码农都做不了架构师?>>> 日期:2012-4-17 来源:GBin1.com 在线演示本地下载大家是不是在开发设计过程中遇到如下情况?某些浏览器不支持H ...
JavaScript 日期格式化简单有用
JavaScript 日期格式化简单有用代码例如以下,引入jquery后直接后增加下面代码刷新可測试 Date.prototype.Format = function (fmt) { //auth ...
JavaScript入门(part4)--简单数据类型
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门简单数据类型数字型number 数字型范围数字型三个特殊值函数isNaN 字符串型string 布尔型 ...
c语言字符笛卡尔积,JavaScript笛卡尔积超简单实现算法示例
本文实例讲述了JavaScript笛卡尔积超简单实现算法.分享给大家供大家参考,具体如下: JS笛卡尔积算法 function cartesianProductOf() { return Array. ...
html网页制作秒表原理,JavaScript怎么实现简单的秒表效果？（代码示例）
JavaScript怎么实现简单的秒表效果?下面本篇文章给大家通过代码示例介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 描述: 实现一个简单的秒表,点击启动按钮时开始计时 ...
HTML+JavaScript实现一个简单抽奖功能
HTML+JavaScript实现一个简单抽奖功能 emmm,闲的蛋疼,没事做,软考也不想复习为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当 ...
html+css+javaScript实现一个简单的注册界面
html+css+javaScript实现一个简单的注册界面自学html,css,js也有一小段时间了,尝试着做点东西来巩固一下,就决定实现这个简单的注册界面.实现的注册界面很普通,没有加上华丽的装 ...

用JavaScript实现的简单Wizard

用JavaScript实现的简单Wizard相关推荐

最新文章

热门文章