用JavaScript實現的簡單Wizard

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

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

1. xx = {};
2. xx.wizard = {};
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) {
15. // Private attributes
17. /** The wizard navigation element. */
18. var eleWizardNavigation = document.getElementById(oConfig.wizardNavigation);
20. /** The wizard steps content element. */
21. var eleWizardContent = document.getElementById(oConfig.wizardContent);
23. /** The wizard controller element. */
24. var eleWizardController = document.getElementById(oConfig.wizardController);
26. /** All WizardSteps list. */
27. var steps = new Array();
29. /** Current selected WizardStep. */
30. var curStep;
32. /** An instance of WizardNavigation class is used to switch between steps. */
33. var wizardNavigation;
35. /** An instance of WizardController class is used to contains controller buttons. */
36. var wizardController;
38. /** The reference to current Wizard object. */
39. var thiz = this;
41. // Public methods
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. }
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. }
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. }
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. }
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. }
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. }
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);
127. wizardNavigation.setSelected(step);
128. wizardNavigation.refresh();
130. wizardController.setSelected(step);
131. wizardController.refresh();
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. }
143. /**
144. * Render the wizard object to page.
145. */
146. this.render = function() {
147. curStep = steps[0];
148. steps[0].setVisible(true);
150. wizardNavigation = new xx.wizard.WizardNavigation({wizard: thiz, steps: steps});
151. wizardNavigation.render(eleWizardNavigation);
153. wizardController = new xx.wizard.WizardController({wizard: thiz, steps: steps});
154. wizardController.render(eleWizardController);
155. }
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. }
176. xx.wizard.WizardNavigation = function(oConfig) {
177. var wizard = oConfig.wizard;
178. var steps = oConfig.steps;
179. var selectedStep;
180. var eleParent;
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. }
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. }
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. }
239. this.setSelected = function(oWizardStep) {
240. selectedStep = oWizardStep;
241. }
242. }
244. xx.wizard.WizardController = function(oConfig) {
245. var wizard = oConfig.wizard;
246. var steps = oConfig.steps;
247. var selectedStep;
248. var eleParent;
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. }
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. }
273. this.setSelected = function(oWizardStep) {
274. selectedStep = oWizardStep;
275. }
276. }
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;
296. this.getId = function() {
297. return id;
298. }
300. this.getName = function() {
301. return name;
302. }
304. this.getTitle = function() {
305. return title;
306. }
308. this.isVisible = function() {
309. return document.getElementById(id).style.display;
310. }
312. this.setVisible = function(visible) {
313. document.getElementById(id).style.display = (visible)? 'block':'none';
314. }
316. this.getControlButtons = function() {
317. return controlButtons;
318. }
320. this.getNavigationCallback = function() {
321. return navigationCallback;
322. }
323. }