1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Smart Wizard 2 - Multiple Wizard Example - a javascript jQuery wizard control plugin</title>
6 <link href="styles/smart_wizard.css" rel="stylesheet" type="text/css">
7 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
8 <script type="text/javascript" src="js/jquery.smartWizard-2.0.min.js"></script>
10 <script type="text/javascript">
11 $(document).ready(function(){
13 $('#wizard1').smartWizard({transitionEffect:'fade',onFinish:onFinishCallback});
15 $('#wizard2').smartWizard({transitionEffect:'slide',onFinish:onFinishCallback});
16 function onFinishCallback(){
17 alert('Finish Called');
24 <table align="center" border="0" cellpadding="0" cellspacing="0">
27 <!-- Smart Wizard wizard1-->
28 <div id="wizard1" class="swMain">
30 <li><a href="#step-1">
31 <span class="stepNumber">1</span>
32 <span class="stepDesc">
34 <small>Step 1 description</small>
37 <li><a href="#step-2">
38 <span class="stepNumber">2</span>
39 <span class="stepDesc">
41 <small>Step 2 description</small>
44 <li><a href="#step-3">
45 <span class="stepNumber">3</span>
46 <span class="stepDesc">
48 <small>Step 3 description</small>
51 <li><a href="#step-4">
52 <span class="stepNumber">4</span>
53 <span class="stepDesc">
55 <small>Step 4 description</small>
60 <h2 class="StepTitle">Step 1 Content</h2>
65 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
66 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
67 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
68 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
69 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
72 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
73 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
74 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
75 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
76 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
79 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
80 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
81 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
82 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
83 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
87 <h2 class="StepTitle">Step 2 Content</h2>
88 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
89 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
90 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
91 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
92 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
95 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
96 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
97 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
98 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
99 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
102 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
103 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
104 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
105 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
106 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
110 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
111 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
112 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
113 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
117 <h2 class="StepTitle">Step 3 Content</h2>
118 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
119 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
120 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
121 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
122 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
125 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
126 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
127 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
128 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
129 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 <h2 class="StepTitle">Step 4 Content</h2>
134 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
135 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
136 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
137 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
138 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
141 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
142 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
143 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
144 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
145 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
148 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
149 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
150 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
151 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
152 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
156 <!-- End SmartWizard Content 1 -->
160 <!-- Smart Wizard wizard2-->
161 <div id="wizard2" class="swMain">
163 <li><a href="#step-1">
164 <span class="stepNumber">1</span>
165 <span class="stepDesc">
167 <small>Step 1 description</small>
170 <li><a href="#step-2">
171 <span class="stepNumber">2</span>
172 <span class="stepDesc">
174 <small>Step 2 description</small>
177 <li><a href="#step-3">
178 <span class="stepNumber">3</span>
179 <span class="stepDesc">
181 <small>Step 3 description</small>
184 <li><a href="#step-4">
185 <span class="stepNumber">4</span>
186 <span class="stepDesc">
188 <small>Step 4 description</small>
193 <h2 class="StepTitle">Step 1 Content</h2>
198 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
199 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
200 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
201 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
202 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
205 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
206 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
207 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
208 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
209 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
212 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
213 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
214 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
215 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
216 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
220 <h2 class="StepTitle">Step 2 Content</h2>
221 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
222 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
223 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
224 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
225 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
228 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
229 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
230 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
231 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
232 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
235 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
236 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
237 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
238 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
239 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
242 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
243 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
244 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
245 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
246 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
250 <h2 class="StepTitle">Step 3 Content</h2>
251 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
252 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
253 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
254 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
255 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
258 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
259 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
260 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
261 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
262 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
266 <h2 class="StepTitle">Step 4 Content</h2>
267 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
268 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
269 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
270 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
271 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
274 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
275 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
276 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
277 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
278 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
281 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
282 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
283 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
284 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
285 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
289 <!-- End SmartWizard Content 2 -->