本文链接: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的运行效果了。