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