本文链接: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的运行效果了。
分享到:
相关推荐
自动封装生成工具Lp_Wizard使用教程,Lp_Wizard可创建AD,CADENCE,PADS等格式的封装
LP Wizard 10.5详细使用教程(附图) IPC7351标准封装库 LP Wizard 10.5 安装破解文件以及完整破解教程(亲测win10可用) https://download.csdn.net/download/weixin_43939664/10828592
eclipse 中自定义向导(wizard)的实现 是结合实际例子进行讲解,因为设计的保密 ,其中有一些被删除,往谅解!
lp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txtlp wizard 下载.txt
Wizard1的使用例子,Wizard1控件使用例子看VS2005Example文件加下的Default5.aspx页面。
Mician uWave Wizard 7.5安装程序,需要的可以自行下载
lpwizard用户指南
LP Wizard 10.5版本破解详细操作步骤(含win7系统破解)
FTP Wizard 2.0 能让一个对FTP相关知识了解很少的用户访问一个FTP服务器,而且使用的代码很少。FTP的目的是存储信息,保持信息在网络上可用,如果获得许可,用户还可以在FTP上保存文件。 FTP Wizard 使得这些...
Xilinx系列FPGA的IP官方使用手册,Clocking Wizard,时钟管理
Kext Wizard3.7.10_cn
Wizard控件的使用,简单明了
ionCube loader wizard
德国佬用英文写的uWave Wizard用户手册,非常详细
CUDA VS Wizard 2.9 更新
前端项目-twitter-bootstrap-wizard,这个Twitter引导插件用格式化程序选项卡结构构建了一个向导。它允许使用按钮来完成不同的向导步骤来构建向导功能,并且使用事件可以单独钩住每个步骤。
《窗口、文件、进程隐藏工具——无忧隐藏》(HideWizard v9.37最新版)大灰兔至尊破解版 破解:超级大灰兔/hsluoyz/akisn0w 安装方法: 1)安装HideWizard937.exe 2)32位系统请覆盖\x86_crack\HideWizard.exe至...
DDK_Wizard为一自称为懒人的杰作,为我们这些懒人带来了方便,用了之后使人不得不想起那句“懒惰促进科技进步”~~,用了就知道,真适合懒人~~
vilar wizard
LP Wizard 10.5破解文件。