1 | # jQuery Smart Wizard v5
|
2 | #### The awesome jQuery step wizard plugin.
|
3 |
|
4 | [![Build Status](https://travis-ci.org/techlab/jquery-smartwizard.svg?branch=master)](https://travis-ci.org/techlab/jquery-smartwizard)
|
5 | [![npm version](https://badge.fury.io/js/smartwizard.svg)](https://www.npmjs.com/package/smartwizard)
|
6 | [![Packagist Version](https://badgen.net/packagist/v/techlab/smartwizard)](https://packagist.org/packages/techlab/smartwizard)
|
7 | [![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard)
|
8 | [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/smartwizard/badge?style=rounded)](https://www.jsdelivr.com/package/npm/smartwizard)
|
9 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE)
|
10 | [![GitHub Repo](https://badgen.net/badge/icon/jquery-smartwizard?icon=github&label=&color=0da4d3)](https://github.com/techlab/jquery-smartwizard)
|
11 | [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
|
12 |
|
13 |
|
14 | **jQuery Smart Wizard** is an accessible step wizard plugin for jQuery.
|
15 | Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc.
|
16 | Easy implementation, Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features.
|
17 |
|
18 | + [Homepage](http://techlaboratory.net/jquery-smartwizard)
|
19 | + [Documentation](http://techlaboratory.net/jquery-smartwizard#documentation)
|
20 | + [Demos](http://techlaboratory.net/jquery-smartwizard#demo)
|
21 | + [StackOverflow Q&A](http://stackoverflow.com/questions/tagged/smart-wizard)
|
22 | + [GitHub Issues](https://github.com/techlab/jquery-smartwizard/issues)
|
23 |
|
24 | Demos
|
25 | -----
|
26 | + [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5)
|
27 | + [Ajax Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5/ajax)
|
28 | + [Multiple Wizard Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5/multiple)
|
29 |
|
30 | Screenshots
|
31 | -----
|
32 | ![Smart Wizard Default](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-default.png)
|
33 |
|
34 | ![Smart Wizard Arrows](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-arrows.png)
|
35 |
|
36 | ![Smart Wizard Black](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-dark.png)
|
37 |
|
38 | ![Smart Wizard Dots](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-dots.png)
|
39 |
|
40 |
|
41 | Requirements
|
42 | -----
|
43 | + [jQuery](http://jquery.com/) (supports from jQuery-1.11.1+ to the latest jQuery-3.5)
|
44 |
|
45 | Installation
|
46 | -----
|
47 |
|
48 | ### [NPM](https://www.npmjs.com/package/smartwizard)
|
49 | npm install smartwizard
|
50 |
|
51 | ### [Yarn](https://yarn.pm/smartwizard)
|
52 | yarn add smartwizard
|
53 |
|
54 | ### [Composer](https://packagist.org/packages/techlab/smartwizard)
|
55 | composer require techlab/smartwizard
|
56 |
|
57 | ### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard)
|
58 | ```html
|
59 | <!-- CSS -->
|
60 | <link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
|
61 |
|
62 | <!-- JavaScript -->
|
63 | <script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
|
64 | ```
|
65 | ### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/)
|
66 | ```html
|
67 | <!-- CSS -->
|
68 | <link href="https://unpkg.com/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
|
69 |
|
70 | <!-- JavaScript -->
|
71 | <script src="https://unpkg.com/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
|
72 | ```
|
73 |
|
74 | ### Download
|
75 | #### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip)
|
76 |
|
77 | Features
|
78 | -----
|
79 |
|
80 | - Standalone CSS
|
81 | - Accessible controls
|
82 | - Bootstrap compatible
|
83 | - Cool themes included
|
84 | - Dark mode
|
85 | - URL navigation and selection
|
86 | - Event support
|
87 | - Ajax content support
|
88 | - Keyboard navigation
|
89 | - Auto height adjustment
|
90 | - Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
|
91 | - External anchor support
|
92 | - Easy to implement and minimal HTML required
|
93 | - Customizable toolbar, option to add extra buttons
|
94 | - Responsive design
|
95 | - reset option
|
96 | - Easy navigation with step anchors and navigation buttons
|
97 | - Easy to implement and minimal HTML required
|
98 | - Supports all modern browsers
|
99 | - Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
|
100 |
|
101 | Usage
|
102 | -----
|
103 |
|
104 | Include SmartWizard CSS
|
105 | ```html
|
106 | <link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
|
107 | ```
|
108 |
|
109 | Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps content*).
|
110 | ```html
|
111 | <div id="smartwizard">
|
112 |
|
113 | <ul class="nav">
|
114 | <li class="nav-item">
|
115 | <a class="nav-link" href="#step-1">
|
116 | Step 1
|
117 | </a>
|
118 | </li>
|
119 | <li class="nav-item">
|
120 | <a class="nav-link" href="#step-2">
|
121 | Step 2
|
122 | </a>
|
123 | </li>
|
124 | <li class="nav-item">
|
125 | <a class="nav-link" href="#step-3">
|
126 | Step 3
|
127 | </a>
|
128 | </li>
|
129 | <li class="nav-item">
|
130 | <a class="nav-link" href="#step-4">
|
131 | Step 4
|
132 | </a>
|
133 | </li>
|
134 | </ul>
|
135 |
|
136 | <div class="tab-content">
|
137 | <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
|
138 | Step 1 Content
|
139 | </div>
|
140 | <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
|
141 | Step 2 Content
|
142 | </div>
|
143 | <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
|
144 | Step 3 Content
|
145 | </div>
|
146 | <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
|
147 | Step 4 Content
|
148 | </div>
|
149 | </div>
|
150 | </div>
|
151 | ```
|
152 |
|
153 | Include jQuery (*ignore this if you have already included on the page*).
|
154 | ```html
|
155 | <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
156 | ```
|
157 |
|
158 | Include SmartWizard plugin
|
159 | ```html
|
160 | <script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
|
161 | ```
|
162 | Initialize the SmartWizard
|
163 | ```html
|
164 | <script type="text/javascript">
|
165 | $(document).ready(function() {
|
166 |
|
167 | $('#smartwizard').smartWizard();
|
168 |
|
169 | });
|
170 | </script>
|
171 | ```
|
172 | That's it!
|
173 |
|
174 | Please see the [documentation](http://techlaboratory.net/jquery-smartwizard#documentation) for more details on implementation and usage.
|
175 |
|
176 | ##### All options
|
177 |
|
178 | ```JavaScript
|
179 | $('#smartwizard').smartWizard({
|
180 | selected: 0, // Initial selected step, 0 = first step
|
181 | theme: 'default', // theme for the wizard, related css need to include for other than default theme
|
182 | justified: true, // Nav menu justification. true/false
|
183 | darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
|
184 | autoAdjustHeight: true, // Automatically adjust content height
|
185 | cycleSteps: false, // Allows to cycle the navigation of steps
|
186 | backButtonSupport: true, // Enable the back button support
|
187 | enableURLhash: true, // Enable selection of the step based on url hash
|
188 | transition: {
|
189 | animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
|
190 | speed: '400', // Transion animation speed
|
191 | easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
|
192 | },
|
193 | toolbarSettings: {
|
194 | toolbarPosition: 'bottom', // none, top, bottom, both
|
195 | toolbarButtonPosition: 'right', // left, right, center
|
196 | showNextButton: true, // show/hide a Next button
|
197 | showPreviousButton: true, // show/hide a Previous button
|
198 | toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
|
199 | },
|
200 | anchorSettings: {
|
201 | anchorClickable: true, // Enable/Disable anchor navigation
|
202 | enableAllAnchors: false, // Activates all anchors clickable all times
|
203 | markDoneStep: true, // Add done state on navigation
|
204 | markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
|
205 | removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
|
206 | enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
|
207 | },
|
208 | keyboardSettings: {
|
209 | keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
|
210 | keyLeft: [37], // Left key code
|
211 | keyRight: [39] // Right key code
|
212 | },
|
213 | lang: { // Language variables for button
|
214 | next: 'Next',
|
215 | previous: 'Previous'
|
216 | },
|
217 | disabledSteps: [], // Array Steps disabled
|
218 | errorSteps: [], // Highlight step with errors
|
219 | hiddenSteps: [] // Hidden steps
|
220 | });
|
221 | ```
|
222 |
|
223 | License
|
224 | ----
|
225 | [MIT License](https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE)
|
226 |
|
227 | Contribute
|
228 | ----
|
229 | If you like the project please support with your contribution.
|
230 |
|
231 | [Donate on Paypal](https://www.paypal.me/dipuraj)
|
232 |
|
233 | Thank you :)
|