A simple plugin to convert content into a step-by-step wizard. This package utilizes jQuery and Bootstrap. It was built with jQuery 2.x+ and Bootstrap 3.x+
Checkout the respository with git
<!--Jquery from your library or the copies in demo folder-->
<script src="js/jquery-2.2.2.min.js"></script>
<!--Bootstrap from your library or the copies in demo folder-->
<script src="js/bootstrap-3.3.6.min.js"></script>
<link href="css/bootstrap-3.3.6.min.css" rel="stylesheet" media="screen">
<!--Wizard Builder from the /dist folder (use .min versions in production-->
<script src="../dist/jquery.wizard-builder.min.js"></script>
<link href="../dist/jquery.wizard-builder.min.css" rel="stylesheet">
Simple Example. See /demo/index.html for more complex scenarios
<!-- Load the libraries, css, and js as shown above into your <head> or combination <head> and bottom of <body> -->
<div id="my_wizard">
<ul class="steps">
<li data-step="1">Step 1</li>
<li data-step="2">Step 2</li>
</ul>
<div class="steps-content">
<div data-step="1">
...Content
</div>
<div data-step="2">
...Content
</div>
</div>
</div>
<!-- Just before end of page before </body> run the Javascript -->
<script type="text/javascript">
// $("#my_wizard").wizardBuilder(); // Simple initiation with JS having no options passed in
// Javascript manual init with a couple options passed in
$("#my_wizard").wizardBuilder({
actionBar: false, // Hide the embedded next/prev buttons
onCompleted: function(element) { // Add a callback function when the final step "Complete" is pushed
console.log(element);
},
});
</script>
Initialization options that can be passed in during initial build of the wizard
$("#my_wizard").wizardBuilder({
actionBar: false // OPTION: Hide the embedded next/prev buttons
});
Option | Default | Allowed | Description |
---|---|---|---|
actionBar | true | true / false | Add the button action bar inline with the step elements. Options are boolean true or false to show or hide the buttons in the upper step bar |
bottomButtons | true | true / false | Add the next/prev buttons below the content container. Options are boolean true or false to show or hide the buttons at the bottom of the wizard |
autoSubmit | false | true / false | If set to true and the whole wizard is contained within a <form> tag, the final "Complete" step will simply submit the form to its action. If you have added an onCompleted method call, this option is ignored |
stepCounterType | 'numbers' | 'numbers', 'letters', 'none' | The types of prefix for the step boxes. Defaults to using 'numbers' starting at 1. 'letters' will start steps with "A", 'none' will show no step label prefix |
btnText | { next : 'Next', previous: 'Previous', complete: 'Complete' } | An object with at least ONE of the 3 properties set in the default to override | You can change the default button text for one or more of the button types. Value must be an object with properies |
nextClass | 'btn btn-default btn-mini btn-xs' | Any CSS Classes | The CSS class(es) to apply to the NEXT buttons (these are also applied to Complete button with finalClass option combined) |
prevClass | 'btn btn-default btn-mini btn-xs' | Any CSS Classes | The CSS class(es) to apply to the PREVIOUS buttons |
completeClass | 'btn-success' | Any CSS Classes | The CSS class(es) to apply to the FINAL button (includes the nextClass option before this is appended) |
Initialization of event callbacks that get triggered. They pass in just like options during setup
$("#my_wizard").wizardBuilder({
onCompleted: function(element) { // Add a callback function when the final step "Complete" is pushed
console.log(element);
},
});
Event | Parameters | Return | Description |
---|---|---|---|
onCompleted | (self) | Null |
Triggered when the final submission button is pressed. Receives an instance of its WizardBuilder object as the self parameter. This does not require a return value If this event is hooked up, the option for autoSubmit is ignored. |
onStepLoadBefore | (self, direction, event) | Boolean |
Triggered whenever a step is about to be loaded Receives an instance of its WizardBuilder object as the self parameter. Receives a boolean parameter (direction); true if its an attempt to move forward a step, false if backward Receives the original browser event as 3rd parameter Return a BOOLEAN true if you want it to proceed or a false to stop it from changing steps This is the old checkStep method renamed and will be rewritten very soon as a bunch of new methods are added for events |
Methods that can be called on the wizard object directly
$("#my_wizard").wizardBuilder('methodNameBelow', { // methodNameBelow is referenced below
param_1: 'param_value_1',
param_2: 'param_value_2' // etc. Params are listed in docs below as NAME: DATA TYPE (with descriptions on right)
});
Method Name | Parameters | Description |
---|---|---|
setErrorCount | step:int, errors:int |
Sets the Error Count in the step headings for a specific step An integer is expected for the two parameters Step must be a valid step number 1 to X (number of steps in your wizard) If errors is set to 0, the error label will disappear |
getStepCount | No Parameters | Returns the integer number of steps in the wizard |
The MIT License (MIT)
Copyright (c) 2016 - Joel Colombo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
jQuery / jqLite Wizard Plugin https://github.com/bygiro/jQuery-Wizard-Plugin version: 0.0.4 Author: Girolamo Tomaselli http://bygiro.com Copyright (c) 2013 G. Tomaselli Licensed under the MIT license.