Flexible Bootstrap Plugin To Create Wizard Style Interface - Smart Wizard
File Size: | 293 KB |
---|---|
Views Total: | 39962 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Smart Wizard is a jQuery wizard plugin that lets you split long content into a step-by-step interactive wizard interface. Great for form wizard and step based tour guide.
More features:
- AJAX enabled.
- Accessibility.
- Dark Mode
- Events supported.
- Styled with Bootstrap.
- 5 built-in themes.
- Supports URL hash.
- Creates a step bar that shows the current step.
- Keyboard navigation.
- Compatible with Bootstrap 5, Bootstrap 4 and Bootstrap 3.
See Also:
How To Use It:
1. Load the Bootstrap's stylesheet in the webpage (OPTIONAL Since v5.0.0).
<link rel="stylesheet" href="bootstrap.min.css" />
2. Load the core stylesheet SmartWizard.css
and a theme CSS of your choice in the webpage.
<!-- Core Stylesheet --> <link href="./dist/css/smart_wizard.min.css" rel="stylesheet" /> <!-- Optional SmartWizard themes --> <link href="./dist/css/smart_wizard_arrows.min.css" rel="stylesheet"> <link href="./dist/css/smart_wizard_dots.min.css" rel="stylesheet"> <link href="./dist/css/smart_wizard_round.min.css" rel="stylesheet"> <link href="./dist/css/smart_wizard_square.min.css" rel="stylesheet"> <!-- All In One --> <link href="./dist/css/smart_wizard_all.min.css" rel="stylesheet" />
3. The basic HTML structure for the smart wizard.
<div id="smartwizard"> <ul class="nav"> <li> <a class="nav-link" href="#step-1"> Step 1 </a> </li> <li> <a class="nav-link" href="#step-2"> Step 2 </a> </li> <li> <a class="nav-link" href="#step-3"> Step 3 </a> </li> ... more nav items here ... </ul> <div class="tab-content"> <div id="step-1" class="tab-pane" role="tabpanel"> Step 1 </div> <div id="step-2" class="tab-pane" role="tabpanel"> Step 2 </div> <div id="step-3" class="tab-pane" role="tabpanel"> Step 3 </div> ... more steps here ... </div> </div>
4. Load jQuery library and the jQuery Smart Wizard plugin's script at the end of the webpage.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="./dist/js/jquery.smartWizard.min.js"></script>
5. Initialize the smart wizard with default options. That's it.
$('#smartwizard').smartWizard();
6. This example shows how to load steps from an external data source via AJAX:
<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#step-1" data-repo="jquery-smarttab"> <strong>SmartTab</strong><br />repository details from GitHub </a> </li> <li class="nav-item"> <a class="nav-link" href="#step-2" data-repo="smartwizard"> <strong>SmartWizard</strong><br />repository details from GitHub </a> </li> <li class="nav-item"> <a class="nav-link" href="#step-3" data-repo="jquery-smartcart"> <strong>SmartCart</strong><br />repository details from GitHub </a> </li> </ul>
$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) { var repo = anchorObject.data('repo'); var ajaxURL = "https://api.npms.io/v2/package/" + repo; // Return a promise object return new Promise((resolve, reject) => { // Ajax call to fetch your content $.ajax({ method : "GET", url : ajaxURL, beforeSend: function( xhr ) { // Show the loader $('#smartwizard').smartWizard("loader", "show"); } }).done(function( res ) { // console.log(res); var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>'; html += '<br>URL: <strong>' + ajaxURL + '</strong>'; html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>'; html += '<br>Description: ' + res.collected.metadata.description; html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>'; html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', '); // html += '<br>Clone URL: ' + res.clone_url; html += '<br>Stars: ' + res.collected.github.starsCount; html += '<br>Forks: ' + res.collected.github.forksCount; html += '<br>Watchers: ' + res.collected.github.subscribersCount; html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count; html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100); html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100); html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100); // Resolve the Promise with the tab content resolve(html); // Hide the loader $('#smartwizard').smartWizard("loader", "hide"); }).fail(function(err) { // Reject the Promise with error message to show as tab content reject( "An error loading the resource" ); // Hide the loader $('#smartwizard').smartWizard("loader", "hide"); }); }); });
7. All default options which can be used to easily customize your wizard.
$('#smartwizard').smartWizard({ // Initial selected step, 0 = first step selected: 0, // 'arrows', 'square', 'round', 'dots' theme: 'basic', // Nav menu justification. true/false justified: true, // Automatically adjust content height autoAdjustHeight:true, // Show url hash based on step enableURLhash: true, // Enable the back button support backButtonSupport: true, // Animation options transition: { // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify) animation: 'none', // Animation speed. Not used if animation is 'css' speed: '400', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css' easing: '', // Only used if animation is 'css'. Animation CSS prefix prefixCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction fwdShowCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction fwdHideCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction bckShowCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction bckHideCss: '', }, // Step bar options toolbar: { // none|top|bottom|both position: 'bottom', // show/hide a Next button showNextButton: true, // show/hide a Previous button showPreviousButton: true, // Extra html to show on toolbar extraHtml: '' }, // Anchor options anchor: { // Enable/Disable anchor navigation enableNavigation: true, // Activates all anchors clickable always enableNavigationAlways: false, // Add done state on visited steps enableDoneState: true, // When a step selected by url hash, all previous steps are marked done markPreviousStepsAsDone: true, // While navigate back, done state will be cleared unDoneOnBackNavigation: false, // Enable/Disable the done state navigation enableDoneStateNavigation: true }, // Keyboard options keyboard: { // Enable/Disable keyboard navigation(left and right keys are used if enabled) keyNavigation: true, // Left key code keyLeft: [37], // Right key code keyRight: [39] }, // Language variables for button lang: { next: 'Next', previous: 'Previous' }, // CSS Class settings style: { mainCss: 'sw', navCss: 'nav', navLinkCss: 'nav-link', contentCss: 'tab-content', contentPanelCss: 'tab-pane', themePrefixCss: 'sw-theme-', anchorDefaultCss: 'default', anchorDoneCss: 'done', anchorActiveCss: 'active', anchorDisabledCss: 'disabled', anchorHiddenCss: 'hidden', anchorErrorCss: 'error', anchorWarningCss: 'warning', justifiedCss: 'sw-justified', btnCss: 'sw-btn', btnNextCss: 'sw-btn-next', btnPrevCss: 'sw-btn-prev', loaderCss: 'sw-loading', progressCss: 'progress', progressBarCss: 'progress-bar', toolbarCss: 'toolbar', toolbarPrefixCss: 'toolbar-', }, // Array of disabled Steps disabledSteps: [], // Highlight step with errors errorSteps: [], // Array Steps warning warningSteps: [], // Hidden steps hiddenSteps: [], // Callback function for content loading getContent: null, });
8. Available event handlers.
// When the plugin is initialized $("#smartwizard").on("initialized", function(e) { // do something }); // When the plugin is loaded $("#smartwizard").on("loaded", function(e) { // do something }); // Triggered just before leaving from a step $("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, nextStepNumber, stepDirection) { // do something }); // When a step is shown $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) { // do something });
9. Available API methods to create your own wizard controls.
// goto a specific step $('#smartwizard').smartWizard('goToStep', stepIndex, force); // update options $('#smartwizard').smartWizard('setOptions', stepIndex); // goto the next step $('#smartwizard').smartWizard('next'); // goto the prev step $('#smartwizard').smartWizard('prev'); // reset the wizard $('#smartwizard').smartWizard('reset'); // change the state of step(s) $('#smartwizard').smartWizard("setState", [1,3], "disable"); $('#smartwizard').smartWizard("setState", [2], "hide"); // unset the state of step(s) $('#smartwizard').smartWizard("unsetState", [1,3], "disable"); // get the current step index var stepIndex = $('#smartwizard').smartWizard("getStepIndex"); // show/hide content loader $('#smartwizard').smartWizard("loader", "show"); $('#smartwizard').smartWizard("loader", "hide"); // get options info $('#smartwizard').smartWizard("getOptions"); // get step info $('#smartwizard').smartWizard("getStepInfo"); // adjust the content height of the current step $('#smartwizard').smartWizard("fixHeight");
Changelog:
v6.0.6 (2022-10-03)
- Fixed: History back on step1 not working
v6.0.5 (2022-08-08)
- Fixed: unDoneOnBackNavigation not working
v6.0.4 (2022-07-31)
- Changed: Code optimizations
v6.0.3 (2022-07-31)
- Fixed: Navigation not properly maintained when navigate fast
v6.0.1 (2022-06-27)
- Added: Support for jQuery Slim version
- Added: Public function fixHeight.
- Added: Public function setState.
- Added: Public function unsetState.
- Added: Public function getStepInfo to get step index and total steps.
- Added: goToStep function with force parameter.
- Added: Built-in progressbar
- Added: New themes, Square and Round
- Added: Dots and Square these can have progressbar on navigation by adding nav-progress CSS Class.
- Added: Colors are changable dynamically using CSS variables.
- Added: Bootstrap 5 support
- Added: Num(badge) class support on all themes
- Added: RTL (Right-to-left language) support
- Added: initialized event
- Added: Move CSS class names to options
- Added: Transition animations can be extended
- Added: CSS Animations support on transition animations. Supports Animate.css
- Changed: JavaScript and CSS code is rewritten
- Changed: Imporoved all CSS themes
- Changed: Made most of the options can changed with setOptions function
- Changed: Rewritten option names and properties with minimal and meaningful names
- Changed: Improved transition animations
- Fixed: Reset doesn't clear the existing steps of the error state.
- Fixed: goToStep method fails to recognize the correct step
- Fixed: URL Navigation to check if step visited.
- Fixed: Fixed and also added fixHeight public function to refresh content height.
- Fixed: CSS Files are empty
- Fixed: stepNumber is incorrect on showStep event when no transition
- Fixed: showStep showing Null instead of index 0 on initializing
- Fixed: showStep's stepIndex contains previous index
- Fixed: Content not showing when used inside a Bootrap 4 modal
- Fixed: Other fixes
- Removed: this.options.toolbar.buttonPosition is removed
- Removed: cycleNavigation is removed
- Removed: Dark mode is removed. Added CSS variable support to change any colors. See example for dark colors.
v5.1.1 (2020-07-11)
- Added: Accessibility
- Added: Dark Mode support for all themes
- Added: New theme (Progress)
- Added: leaveStep event has new parameter => nextStepIndex
- Added: UMD (Universal Module Definition) support
- Fixed: Incorrect stepDirection on leaveStep event
v5.0.0 (2020-05-24)
- Complete rewrite of JavaScript and CSS
- CSS to SCSS
- Updated all build packages
- External Ajax content support via Promise
- New navigation animations added
- New themes added
- New public functions
- New content loading event
- Standalone CSS with Bootstrap compatibility
v4.4.1 (2020-02-16)
- Added goToStep and hiddenSteps methods
- Build system packages updated to latest available.
v4.3.1 (2018-03-12)
- Bootstrap 4 support, bug fixes and improvements
v4.2.2 (2017-03-27)
- Small fixes and multiple wizard example added
v4.2.1 (2017-03-27)
- Dots and Circles themes updated to new design and made responsive
v4.1.7 (2017-02-21)
- Dots and Circles themes updated to new design and made responsive
v4.1.5 (2017-02-01)
- JS & CSS update
v4.1.2 (2017-01-09)
- JS & CSS update
v4.1.1 (2016-12-08)
- many improvements and additions
2016-11-16
- Updated to version v4.0.5
This awesome jQuery plugin is developed by techlab. For more Advanced Usages, please check the demo page or visit the official website.