';
90 | paginationHtml += '';
91 | paginationHtml += '';
92 | paginationHtml += thisSettings.submitButton?'':'';
93 | paginationHtml += '
';
94 | $paginationBloc = $(paginationHtml);
95 | $paginationBloc.css('clear', 'both');
96 | $paginationBloc.find('.prev, .submit').hide();
97 | $paginationBloc.find('.prev').bind('click.easyWizard', function(e) {
98 | e.preventDefault();
99 |
100 | $wizard = $(this).parents('.easyWizardElement');
101 | easyWizardMethods.prevStep.apply($wizard);
102 | });
103 |
104 | $paginationBloc.find('.next').bind('click.easyWizard', function(e) {
105 | e.preventDefault();
106 |
107 | $wizard = $(this).parents('.easyWizardElement');
108 | easyWizardMethods.nextStep.apply($wizard);
109 | });
110 | $this.append($paginationBloc);
111 | }
112 |
113 | $formObj = $this.is('form')?$this:$(this).find('form');
114 |
115 | // beforeSubmit Callback
116 | $this.find('[type="submit"]').bind('click.easyWizard', function(e) {
117 | $wizard = $(this).parents('.easyWizardElement');
118 | var beforeSubmitValue = thisSettings.beforeSubmit($wizard);
119 | if(beforeSubmitValue === false) {
120 | return false;
121 | }
122 | return true;
123 | });
124 | }else if(thisSettings.debug) {
125 | console.log('Can\'t make a wizard with only one step oO');
126 | }
127 | });
128 | },
129 | prevStep : function( ) {
130 | thisSettings = arrSettings[this.index()];
131 | $activeStep = this.find('.'+ thisSettings.stepClassName +'.active');
132 | if($activeStep.prev('.'+thisSettings.stepClassName).length) {
133 | prevStep = parseInt($activeStep.attr('data-step')) - 1;
134 | easyWizardMethods.goToStep.call(this, prevStep);
135 | }
136 | },
137 | nextStep : function( ) {
138 | thisSettings = arrSettings[this.index()];
139 | $activeStep = this.find('.'+ thisSettings.stepClassName +'.active');
140 | if($activeStep.next('.'+thisSettings.stepClassName).length) {
141 | nextStep = parseInt($activeStep.attr('data-step')) + 1;
142 | easyWizardMethods.goToStep.call(this, nextStep);
143 | }
144 | },
145 | goToStep : function(step) {
146 | thisSettings = arrSettings[this.index()];
147 | $activeStep = this.find('.'+ thisSettings.stepClassName +'.active');
148 | $nextStep = this.find('.'+thisSettings.stepClassName+'[data-step="'+step+'"]');
149 | currentStep = $activeStep.attr('data-step');
150 |
151 | // Prevent sliding same step
152 | if (currentStep == step) return;
153 |
154 | // Before callBack
155 | var beforeValue = thisSettings.before(this, $activeStep, $nextStep);
156 | if(beforeValue === false) {
157 | return false;
158 | }
159 |
160 | // Define direction for sliding
161 | if(currentStep < step) { // forward
162 | leftValue = thisSettings.width * -1;
163 | }else { // backward
164 | leftValue = thisSettings.width;
165 | }
166 |
167 | // Slide !
168 | $activeStep.removeClass('active');
169 | $activeStep.find('input, textarea, select, button').attr('tabindex', '-1');
170 |
171 | $nextStep.css('height', '').addClass('active');
172 | $nextStep.find('input, textarea, select, button').removeAttr('tabindex');
173 |
174 | this.find('.easyWizardWrapper').stop(true, true).animate({
175 | 'margin-left': thisSettings.width * (step - 1) * -1
176 | }, function () {
177 | $activeStep.css({ height: '1px' });
178 | });
179 |
180 | // Defines steps
181 | this.find('.easyWizardSteps .current').removeClass('current');
182 | this.find('.easyWizardSteps li[data-step="'+step+'"]').addClass('current');
183 |
184 | // Define buttons
185 | $paginationBloc = this.find('.easyWizardButtons');
186 | if($paginationBloc.length) {
187 | if(step == 1) {
188 | $paginationBloc.find('.prev, .submit').hide();
189 | $paginationBloc.find('.next').show();
190 | }else if(step < thisSettings.steps) {
191 | $paginationBloc.find('.submit').hide();
192 | $paginationBloc.find('.prev, .next').show();
193 | }else {
194 | if($nextStep.prev('.'+thisSettings.stepClassName).length) { // If there is a previous step, must be always the case but... you know =)
195 | $paginationBloc.find('.prev').show();
196 | }
197 | $paginationBloc.find('.next').hide();
198 | $paginationBloc.find('.submit').show();
199 | }
200 | }
201 |
202 | // After callBack
203 | thisSettings.after(this, $activeStep, $nextStep);
204 | }
205 | };
206 |
207 | $.fn.easyWizard = function(method) {
208 | if ( easyWizardMethods[method] ) {
209 | return easyWizardMethods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
210 | } else if ( typeof method === 'object' || ! method ) {
211 | return easyWizardMethods.init.apply( this, arguments );
212 | } else {
213 | $.error( 'Method ' + method + ' does not exist on jQuery.easyWizard' );
214 | }
215 | };
216 | })(jQuery);
217 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
15 |
16 |
33 |
34 |
35 |
43 |
44 |
45 |
55 |
56 |
57 |
103 |
104 |
105 |
121 |
122 |
123 |
128 |
129 |
130 |
291 |
292 |
293 |
298 |
299 |
415 |
416 |
417 |
418 |
434 |
435 |
436 |
439 |
440 | easyWizard.JS
13 |jQuery plugin to create wizard in no time
14 |Introduction
36 |
37 | There is already some jQuery plugins to make wizards, but none to fit my needs and/or with a slide effect.
38 | So I decide to build my own and share it.
39 | easyWizard is pretty lightweight (5kb uncompressed), have some usefull options and is compatible with 
Chrome, 
Firefox, 
Opera and 
Safari.
40 | I tried to make it simple to use and have some usefull options and hope it will be usefull to some people.
41 |
Getting Started
46 |47 | Download the code here (github repo) 48 | Then, include jQuery and the jquery.easyWizard.js code you just download into your page like this : 49 |
50 |51 | <script src="http://code.jquery.com/jquery-latest.js"></script> 52 | <script src="jquery.easyWizard.js"></script> 53 |54 |
HTML
58 |
59 | This is a little exemple, you can make a wizard with far less elements but I need them to keep is nice with twitter bootstrap.
60 | The minimum is a main container and some sub container to separate each steps, yeah that's all.
61 |
63 | <form id="myWizard" type="get" action="" class="form-horizontal"> 64 | <section class="step" data-step-title="The first"> 65 | <div class="control-group"> 66 | <label class="control-label" for="inputEmail">Email</label> 67 | <div class="controls"> 68 | <input type="text" id="inputEmail" placeholder="Email" class="input-xlarge" title="Email is required !" required > 69 | </div> 70 | </div> 71 | <div class="control-group"> 72 | <label class="control-label" for="inputPassword">Password</label> 73 | <div class="controls"> 74 | <input type="password" id="inputPassword" placeholder="Password" class="input-xlarge"> 75 | </div> 76 | </div> 77 | </section> 78 | <section class="step" data-step-title="The second"> 79 | <div class="control-group"> 80 | <label class="control-label" for="inputUsername">Username</label> 81 | <div class="controls"> 82 | <input type="text" id="inputUsername" placeholder="Username" class="input-xlarge"> 83 | </div> 84 | </div> 85 | </section> 86 | <section class="step" data-step-title="The third"> 87 | <div class="control-group"> 88 | <label class="control-label" for="inputFirstname">Firstname</label> 89 | <div class="controls"> 90 | <input type="text" id="inputFirstname" placeholder="Firstname" class="input-xlarge"> 91 | </div> 92 | </div> 93 | <div class="control-group"> 94 | <label class="control-label" for="inputCity">City</label> 95 | <div class="controls"> 96 | <input type="text" id="inputCity" placeholder="City" class="input-xlarge"> 97 | </div> 98 | </div> 99 | </section> 100 | </form> 101 |102 |
CSS
106 |107 | You only need css to personnalize the buttons and the "Navigation Bar" on top (if you enable those, offcourse). Anyway, here is a small exemple : 108 |
109 |
110 | .easyWizardSteps {list-style:none;width:100%;overflow:hidden;margin:0;padding:0;border-bottom:1px solid #ccc;margin-bottom:20px}
111 | .easyWizardSteps li {font-size:18px;display:inline-block;padding:10px;color:#B0B1B3;margin-right:20px;}
112 | .easyWizardSteps li span {font-size:24px}
113 | .easyWizardSteps li.current {color:#000}
114 |
115 | .easyWizardButtons {overflow:hidden;padding:10px;}
116 | .easyWizardButtons button, .easyWizardButtons .submit {cursor:pointer}
117 | .easyWizardButtons .prev {float:left}
118 | .easyWizardButtons .next, .easyWizardButtons .submit {float:right}
119 |
120 | Javascript
124 |
125 | $('#myWizard').easyWizard();
126 |
127 | Demos
131 | 132 |Basic exemple
133 |
134 | Using the same code above
135 | We just add some class to the buttons to make them nicer (thanks Twitter bootstrap)
136 |
Using callbacks
177 |
178 | $('#myWizard2').easyWizard({
179 | buttonsClass: 'btn',
180 | submitButtonClass: 'btn btn-info',
181 | before: function(wizardObj, currentStepObj, nextStepObj) {
182 | alert('Hello, I\'am the before callback');
183 | },
184 | after: function(wizardObj, prevStepObj, currentStepObj) {
185 | alert('Hello, I\'am the after callback');
186 | },
187 | beforeSubmit: function(wizardObj) {
188 | alert('Hello, I\'am the beforeSubmit callback');
189 | }
190 | });
191 |
192 |
230 |
231 | Using own buttons
232 |
233 | $('#myWizard3').easyWizard({
234 | showSteps: false,
235 | showButtons: false,
236 | submitButton: false
237 | });
238 | $('#myWizard3Pager .previous a').bind('click', function(e) {
239 | e.preventDefault();
240 | $('#myWizard3').easyWizard('prevStep');
241 | });
242 | $('#myWizard3Pager .page a').bind('click', function(e) {
243 | e.preventDefault();
244 | $('#myWizard3').easyWizard('goToStep', $(this).attr('rel'));
245 | });
246 | $('#myWizard3Pager .next a').bind('click', function(e) {
247 | e.preventDefault();
248 | $('#myWizard3').easyWizard('nextStep');
249 | });
250 |
251 |
252 |
253 |
262 |
263 |
264 |
269 |
270 |
279 |
280 |
281 |
265 |
268 | Here it is
266 |Soon this product for you (and only you)
267 |
282 |
290 | -
283 |
- ← Previous 284 |
- 1 285 |
- 2 286 |
- 3 287 |
- Next → 288 |
Options
294 |295 | Yeah cause it's easy, but there is some options to make it your own 296 |
297 || Option | 300 |Type | 301 |Description | 302 | 303 | 304 |
|---|---|---|
| stepClassName | 306 |string | 307 |class of the element to separate each step (default : 'step') | 308 |
| showStep | 311 |boolean | 312 |display the steps top nav or not (default : true) | 313 |
| stepsText | 316 |string | 317 |
318 | Usefull to overide the step nav 319 | {n} will be replaced by the step's number 320 | {t} will be replaced by the step's title defined by the "data-step-title" attribute of the element 321 | (default : '{n}. {t}') 322 | |
323 |
| showButtons | 326 |boolean | 327 |display the nav buttons or not (default : true) | 328 |
| buttonsClass | 331 |string | 332 |class of the buttons (default : '') | 333 |
| prevButton | 336 |string | 337 |text for the "previous" button (default : '< Back') | 338 |
| nextButton | 341 |string | 342 |text for the "next" button (default : 'Next >') | 343 |
| submitButton | 346 |boolean | 347 |add a submit button in the last step or not (default : true) | 348 |
| submitButtonText | 351 |string | 352 |text for the "submit" button (default : 'Submit') | 353 |
| submitButtonClass | 356 |string | 357 |class of the "submit" button (default : '') | 358 |
| debug | 361 |boolean | 362 |activate debug in console or not (default : false) | 363 |
| before | 366 |function | 367 |
368 | before callback 369 | called just before the slide effect 370 | params : (in right order) 371 | wizardObj : object of the wizard 372 | currentStepObj : object of the current step 373 | nextStepObj : object of the next step 374 | return : return false to stay in current step (for form validation for example) 375 | |
376 |
| after | 379 |function | 380 |
381 | after callback 382 | called just after the slide effect 383 | params : (in right order) 384 | wizardObj : object of the wizard 385 | prevStepObj : object of the previous step 386 | currentStepObj : object of the current step 387 | |
388 |
| beforeSubmit | 391 |function | 392 |
393 | beforeSubmit callback 394 | called just before the form submit (if there is a form) 395 | params : 396 | wizardObj : object of the wizard 397 | return : return false to stay in current step (for form validation for example) 398 | default : check for HTML5 form validation error, and slide to the error if found 399 |
400 | function(wizardObj) {
401 | wizardObj.find('input, textarea').each(function() {
402 | if(!this.checkValidity()) {
403 | step = $(this).parents('.'+thisSettings.stepClassName).attr('data-step');
404 | easyWizardMethods.goToStep.call(wizardObj, step);
405 |
406 | return false;
407 | }
408 | });
409 | }
410 |
411 | |
412 |
Extra
419 |
420 | Cool, there is a little extra !
421 | You can call the plugin directly to make your own controls (and buttons).
422 |
424 | // Slide to a step
425 | $('#myWizard').easyWizard('goToStep', 2);
426 |
427 | // Slide to the previous step
428 | $('#myWizard').easyWizard('prevStep');
429 |
430 | // Slide to the next step
431 | $('#myWizard').easyWizard('nextStep');
432 |
433 | 
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
--------------------------------------------------------------------------------
/demo/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Bootstrap.js by @fat & @mdo
3 | * plugins: bootstrap-transition.js, bootstrap-modal.js, bootstrap-dropdown.js, bootstrap-scrollspy.js, bootstrap-tab.js, bootstrap-tooltip.js, bootstrap-popover.js, bootstrap-affix.js, bootstrap-alert.js, bootstrap-button.js, bootstrap-collapse.js, bootstrap-carousel.js, bootstrap-typeahead.js
4 | * Copyright 2012 Twitter, Inc.
5 | * http://www.apache.org/licenses/LICENSE-2.0.txt
6 | */
7 | !function(a){a(function(){a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){var b=function(b,c){this.options=c,this.$element=a(b).delegate('[data-dismiss="modal"]',"click.dismiss.modal",a.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};b.prototype={constructor:b,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var b=this,c=a.Event("show");this.$element.trigger(c);if(this.isShown||c.isDefaultPrevented())return;a("body").addClass("modal-open"),this.isShown=!0,this.escape(),this.backdrop(function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in").attr("aria-hidden",!1).focus(),b.enforceFocus(),c?b.$element.one(a.support.transition.end,function(){b.$element.trigger("shown")}):b.$element.trigger("shown")})},hide:function(b){b&&b.preventDefault();var c=this;b=a.Event("hide"),this.$element.trigger(b);if(!this.isShown||b.isDefaultPrevented())return;this.isShown=!1,a("body").removeClass("modal-open"),this.escape(),a(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),a.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var b=this;a(document).on("focusin.modal",function(a){b.$element[0]!==a.target&&!b.$element.has(a.target).length&&b.$element.focus()})},escape:function(){var a=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(b){b.which==27&&a.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var b=this,c=setTimeout(function(){b.$element.off(a.support.transition.end),b.hideModal()},500);this.$element.one(a.support.transition.end,function(){clearTimeout(c),b.hideModal()})},hideModal:function(a){this.$element.hide().trigger("hidden"),this.backdrop()},removeBackdrop:function(){this.$backdrop.remove(),this.$backdrop=null},backdrop:function(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;this.$backdrop=a('').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(this.removeBackdrop,this)):this.removeBackdrop()):b&&b()}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f).one("hide",function(){c.focus()})})})}(window.jQuery),!function(a){function d(){e(a(b)).removeClass("open")}function e(b){var c=b.attr("data-target"),d;return c||(c=b.attr("href"),c=c&&/#/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,"")),d=a(c),d.length||(d=b.parent()),d}var b="[data-toggle=dropdown]",c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),f,g;if(c.is(".disabled, :disabled"))return;return f=e(c),g=f.hasClass("open"),d(),g||(f.toggleClass("open"),c.focus()),!1},keydown:function(b){var c,d,f,g,h,i;if(!/(38|40|27)/.test(b.keyCode))return;c=a(this),b.preventDefault(),b.stopPropagation();if(c.is(".disabled, :disabled"))return;g=e(c),h=g.hasClass("open");if(!h||h&&b.keyCode==27)return c.click();d=a("[role=menu] li:not(.divider) a",g);if(!d.length)return;i=d.index(d.filter(":focus")),b.keyCode==38&&i>0&&i--,b.keyCode==40&&i',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(a){var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content > *")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'
");u.removeAttr("style");sh_highlightDocument();if(d.showNum){var v=u.html();v=v.replace(/\n/g,"
- "+v+"
- "+v+"