用JavaScript實現的簡單Wizard

今天分享一個自己幾年前用JavaScript寫的Wizard，代碼不多，另外我也沒有添加任何樣式，因為畢竟如果有人要用一般還都是會設計自己的樣式的。

下面是Wizard的JavaScript代碼，代碼比較簡單，就不多做解釋了，wizard.js代碼內容如下：

1. xx = {};  
2. xx.wizard = {};  
3.   
4. /** 
5.  * The Wizard Object constructor. 
6.  * @param (Object) oConfig the object to initialize the Wizard Object. It  
7.  * must include the following attributes: 
8.  * (String)wizardNavigation The id of html element that used to contain navitaion links. 
9.  * (String)wizardContent The id of html element that used to contain all wizard step elements. 
10.  * (String)wizardController The id of html element that used to contain all controller button. 
11.  * @return (Object) an instance of Wizard. 
12.  */  
13. xx.wizard.Wizard = function(oConfig) {  
14.   
15.     // Private attributes   
16.       
17.     /** The wizard navigation element. */  
18.     var eleWizardNavigation = document.getElementById(oConfig.wizardNavigation);  
19.       
20.     /** The wizard steps content element. */  
21.     var eleWizardContent = document.getElementById(oConfig.wizardContent);  
22.       
23.     /** The wizard controller element. */  
24.     var eleWizardController = document.getElementById(oConfig.wizardController);  
25.       
26.     /** All WizardSteps list. */  
27.     var steps = new Array();  
28.       
29.     /** Current selected WizardStep. */  
30.     var curStep;  
31.       
32.     /** An instance of WizardNavigation class is used to switch between steps. */  
33.     var wizardNavigation;  
34.       
35.     /** An instance of WizardController class is used to contains controller buttons. */  
36.     var wizardController;  
37.       
38.     /** The reference to current Wizard object. */  
39.     var thiz = this;  
40.       
41.     // Public methods   
42.       
43.     /** 
44.      * Add a WizardStep to steps list. 
45.      * @param (Object)step An instance of WizardStep. 
46.      * @return (void) 
47.      */  
48.     this.addStep = function(step) {  
49.         steps.push(step)  
50.     }  
51.       
52.     /** 
53.      * Search an instance of WizardStep with given id of WizardStep. If cannot 
54.      * find return null. 
55.      * @param (String)stepId The id of WizardStep instance. 
56.      * @return (Object) An instance of WizardStep. 
57.      */  
58.     this.findStep = function(stepId) {  
59.         for (var idx = 0; idx < steps.length; idx++) {  
60.             if (stepId == steps[idx].getId()) {  
61.                 return steps[idx];  
62.             }  
63.         }  
64.         return null;  
65.     }  
66.   
67.     /** 
68.      * Get the index location of the WizardStep in step list with given id of  
69.      * WizardStep instance. If cannot find it, return -1. 
70.      * @param (String)stepId The id of WizardStep instance. 
71.      * @return (int) The index location. 
72.      */  
73.     this.getStepIndex = function(stepId) {  
74.         for (var idx = 0; idx < steps.length; idx++){  
75.             var step = steps[idx];  
76.             if( step.getId() == stepId ) {  
77.                 return idx;  
78.             }  
79.         }  
80.         return -1;  
81.     }  
82.       
83.     /** 
84.      * Remove all WizardStep instancs from step list. 
85.      * @return (void) 
86.      */  
87.     this.removeAllSteps = function() {  
88.         for (var idx = 0; idx < steps.length; idx++){  
89.             var step = steps[idx];  
90.             step = null;  
91.         }  
92.         steps = new Array();  
93.     }  
94.       
95.     /** 
96.      * Move to previous WizardStep. 
97.      * @return (void) 
98.      */  
99.     this.moveToPrevious = function() {  
100.         var idx = thiz.getStepIndex(curStep.getId());  
101.         if( idx > 0 ) {  
102.             var preStep = steps[idx - 1];  
103.             thiz.moveTo(preStep.getId());  
104.         }  
105.     }  
106.       
107.     /** 
108.      * Move to next WizardStep. 
109.      * @return (void) 
110.      */  
111.     this.moveToNext = function() {  
112.         var idx = thiz.getStepIndex(curStep.getId());  
113.         if( idx < steps.length - 1 ) {  
114.             var nextStep = steps[idx + 1];  
115.             thiz.moveTo(nextStep.getId());  
116.         }  
117.     }  
118.       
119.     /** 
120.      * Move to the WizardStep that has given id of WizardStep. 
121.      * @param (String)stepId The id of WizardStep instance. 
122.      * @return (void) 
123.      */  
124.     this.moveTo = function(stepId) {  
125.         var step = thiz.findStep(stepId);  
126.           
127.         wizardNavigation.setSelected(step);  
128.         wizardNavigation.refresh();  
129.           
130.         wizardController.setSelected(step);  
131.         wizardController.refresh();  
132.   
133.         for (var i = 0; i < steps.length; i++){  
134.             if( steps[i].getId() == stepId ) {  
135.                 steps[i].setVisible(true);  
136.                 curStep = steps[i];  
137.             } else {  
138.                 steps[i].setVisible(false);  
139.             }  
140.         }  
141.     }  
142.       
143.     /** 
144.      * Render the wizard object to page. 
145.      */  
146.     this.render = function() {  
147.         curStep = steps[0];  
148.         steps[0].setVisible(true);  
149.           
150.         wizardNavigation = new xx.wizard.WizardNavigation({wizard: thiz, steps: steps});  
151.         wizardNavigation.render(eleWizardNavigation);  
152.           
153.         wizardController = new xx.wizard.WizardController({wizard: thiz, steps: steps});  
154.         wizardController.render(eleWizardController);  
155.     }  
156.   
157.     /** 
158.      * A util method to generate a controller button. 
159.      * @param (String)id The id of button. 
160.      * @param (String)name The name of button. 
161.      * @param (String)value The value of button. 
162.      * @param (Function)clickHandler The callback function for click this buttion. 
163.      * @return (Element) An html element. 
164.      */  
165.     this.generateButton = function(id, name, value, clickHandler) {  
166.         var eleBtn = document.createElement("input");  
167.         eleBtn.type = 'button';  
168.         eleBtn.id = id;  
169.         eleBtn.name = name;  
170.         eleBtn.value = value;  
171.         eleBtn.onclick = clickHandler;  
172.         return eleBtn;  
173.     }  
174. }  
175.   
176. xx.wizard.WizardNavigation = function(oConfig) {  
177.     var wizard = oConfig.wizard;  
178.     var steps = oConfig.steps;  
179.     var selectedStep;  
180.     var eleParent;  
181.       
182.     this.render = function(ele) {  
183.         if (eleParent == null) {  
184.             eleParent = ele;  
185.         }  
186.         var eleUL = document.createElement("ul");  
187.         if (selectedStep == null) {  
188.             selectedStep = steps[0];  
189.         }  
190.           
191.         var selectedStepIdx = 0;  
192.         for (var idx = 0; idx < steps.length; idx++){  
193.             if (steps[idx].getId() == selectedStep.getId()) {  
194.                 selectedStepIdx = idx;  
195.                 break;  
196.             }  
197.         }  
198.         for (var idx = 0; idx < steps.length; idx++){  
199.             var eleLI = document.createElement("li");  
200.             var className = ''  
201.             if (steps[idx].getId() == selectedStep.getId()) {  
202.                 className += ' selected';  
203.             }  
204.             eleLI.className = className;  
205.             var eleSpan = document.createElement("span");  
206.             if (idx < selectedStepIdx) {  
207.                 var eleLink = document.createElement("a");  
208.                 eleLink.href = '#';  
209.                 var fnCallback = function(wizard, step) {  
210.                     return function() {  
211.                         var navigationCallback = step.getNavigationCallback();  
212.                         if (navigationCallback != null) {  
213.                             navigationCallback();  
214.                         } else {  
215.                             wizard.moveTo(step.getId());  
216.                         }  
217.                     };  
218.                 }(wizard, steps[idx]);  
219.                 eleLink.onclick = fnCallback;  
220.                 eleLink.innerHTML = steps[idx].getTitle();  
221.                 eleSpan.appendChild(eleLink);  
222.             } else {  
223.                 eleSpan.innerHTML = steps[idx].getTitle();  
224.             }  
225.             eleLI.appendChild(eleSpan);  
226.             eleUL.appendChild(eleLI);  
227.         }  
228.         ele.appendChild(eleUL);  
229.     }  
230.       
231.     this.refresh = function() {  
232.         var childNodes = eleParent.childNodes;  
233.         for(var idx = childNodes.length - 1 ; idx >= 0 ; idx-- ) {  
234.             eleParent.removeChild(childNodes[idx]);  
235.         }  
236.         this.render(eleParent);  
237.     }  
238.       
239.     this.setSelected = function(oWizardStep) {  
240.         selectedStep = oWizardStep;  
241.     }  
242. }  
243.   
244. xx.wizard.WizardController = function(oConfig) {  
245.     var wizard = oConfig.wizard;  
246.     var steps = oConfig.steps;  
247.     var selectedStep;  
248.     var eleParent;  
249.       
250.     this.render = function(parent) {  
251.         eleParent = parent;  
252.         var controlButtons = steps[0].getControlButtons();  
253.         if (controlButtons != null) {  
254.             for(var idx = 0; idx < controlButtons.length; idx ++) {  
255.                 eleParent.appendChild(controlButtons[idx]);  
256.             }  
257.         }  
258.     }  
259.       
260.     this.refresh = function() {  
261.         var childNodes = eleParent.childNodes;  
262.         for(var idx = childNodes.length - 1 ; idx >= 0 ; idx-- ) {  
263.             eleParent.removeChild(childNodes[idx]);  
264.         }  
265.         var controlButtons = selectedStep.getControlButtons();  
266.         if (controlButtons != null) {  
267.             for(var idx = 0; idx < controlButtons.length; idx ++) {  
268.                 eleParent.appendChild(controlButtons[idx]);  
269.             }  
270.         }  
271.     }  
272.       
273.     this.setSelected = function(oWizardStep) {  
274.         selectedStep = oWizardStep;  
275.     }  
276. }  
277.   
278. /** 
279.  * The constructor of WizardStep class. 
280.  * @param (Object)oConfig the object to initialize the WizardStep Object. It  
281.  * must include the following attributes: 
282.  * (String)id The identity id of WizardStep object 
283.  * (String)name The id of WizardStep object. 
284.  * (String)title The title of WizardStep object that is used to display in navigation area. 
285.  * (Array)controlButtons The control buttons of WizardStep that are used to display in controller area. 
286.  * (Function)navigationCallback The navigation callback function that will be used on click the step title in navigation area. 
287.  * @return (Object) an instance of WizardStep. 
288.  */  
289. xx.wizard.WizardStep = function(oConfig) {  
290.     var id = oConfig.id;  
291.     var name = oConfig.name;  
292.     var title = oConfig.title;  
293.     var controlButtons = oConfig.controlButtons;  
294.     var navigationCallback = oConfig.navigationCallback;  
295.   
296.     this.getId = function() {  
297.         return id;  
298.     }  
299.       
300.     this.getName = function() {  
301.         return name;  
302.     }  
303.       
304.     this.getTitle = function() {  
305.         return title;  
306.     }  
307.       
308.     this.isVisible = function() {  
309.         return document.getElementById(id).style.display;  
310.     }  
311.       
312.     this.setVisible = function(visible) {  
313.         document.getElementById(id).style.display = (visible)? 'block':'none';  
314.     }  
315.       
316.     this.getControlButtons = function() {  
317.         return controlButtons;  
318.     }  
319.       
320.     this.getNavigationCallback = function() {  
321.         return navigationCallback;  
322.     }  
323. }