Simple Wizard__java implemented with JavaScript

This article link: http://blog.csdn.net/kongxx/article/details/7343529

Today, I share a wizard that I wrote with JavaScript a few years ago, and I didn't add any style, because after all, if someone wants to use it, it will design their own style.

The following is the wizard JavaScript code, the code is relatively simple, do not do more explanation, the Wizard.js code content is as follows:

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 Navi
 Taion 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 Elewizardn
	
	Avigation = 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 are used to switch between steps.
	
	* * var wizardnavigation; /** an instance of the Wizardcontroller class is used to contains controller.
	
	* * 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 A instance of WizardStep W ith 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].get
			Id ()) {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 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.getnavigationcallba
						CK ();
						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 (cont
			ROLBUTTONS[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 (cont
			ROLBUTTONS[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 is used to display into navigation area.
 * (Array) controlbuttons the control buttons of WizardStep, are used to display into controller area. * (Function) Navigationcallback the navigation callback function that'll be used on click the step title in Navigation AR
 Ea.
 * @return (Object) An instance of WizardStep.
	*/xx.wizard.WizardStep = function (oconfig) {var id = oconfig.id;
	var name = Oconfig.name;
	var title = Oconfig.title; VarControlbuttons = 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;
 }
}

Here is the test code, including a JS file and an HTML file

The mywizard.html code is as follows

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 	
	">  

Mywizard.js Code content:


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 (' is Cancel function! ');
	var fnfinish = function () {alert (' is Finish function! ');
	var fnspecial = function () {alert (' 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.ge Neratebutton (' 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.ge Neratebutton (' Step4_cancEl ', ' Step4_cancel ', ' Cancel ', Fncancel, Wizard.generatebutton (' Step4_pre ', ' step4_pre ', ' Previous ', Fnmovetopreviou
	s), Wizard.generatebutton (' Step4_next ', ' step4_next ', ' Next ', Fnmovetonext)]}); Wizard.addstep (new Xx.wizard.WizardStep ({id: ' step5 ', Name: ' Step 5 ', Title: ' Step 5 ', controlbuttons: [wizard.ge Neratebutton (' Step5_cancel ', ' step5_cancel ', ' Cancel ', Fncancel), Wizard.generatebutton (' Step5_pre ', ' step5_pre ', '
	Previous ', fnmovetoprevious, Wizard.generatebutton (' step5_finish ', ' step5_finish ', ' Finish ', fnfinish)]);
Wizard.render (); }
 

Put the three files in a directory and run mywizard.html in the browser to see how the wizard works.