jQuery Stepy
29 |A Wizard Plugin
30 |45 | Markup 46 |
47 | 48 |
49 | You need a form with the right markup as following.
50 | Each .stepy-step will became a step.
51 | The title of the .stepy-step will be the headers titles.
52 | And the .stepy-legend will be the header title description.
53 | Inside the .stepy-step you put your stuffs.
54 |
58 | <form>
59 | <fieldset title="Step 1" class="stepy-step">
60 | <legend class="stepy-legend">legend one</legend>
61 |
62 | <!-- inputs -->
63 | </fieldset>
64 |
65 | <fieldset title="Step 2" class="stepy-step">
66 | <legend class="stepy-legend">legend two</legend>
67 |
68 | <!-- inputs -->
69 | </fieldset>
70 |
71 | <fieldset title="Step 3" class="stepy-step">
72 | <legend class="stepy-legend">legend three</legend>
73 |
74 | <!-- inputs -->
75 | </fieldset>
76 |
77 | <a class="stepy-back">back</a>
78 | <a class="stepy-next">next</a>
79 | <input type="submit" class="stepy-finish" />
80 | </form>
81 |
82 | 87 | Default 88 |
89 | 90 |Using the default options.
91 | 92 |
176 | $('form').stepy();
177 |
178 | 183 | Title Click 184 |
185 | 186 |
187 | You can to use the header items to navigate between the steps with a click.
188 | The header click is good when you have a lot of steps and want to jump a non sequential steps.
189 |
275 | $('.form').stepy({ titleClick: true });
276 |
277 | 282 | Description 283 |
284 | 285 |
286 | Each step receives your description that is the .stepy-legend element of the .stepy-step.
287 | That element is used on header to describe the step, but you can disabled it.
288 | Disable the description does not hide the original .stepy-legend element. If you want to hide just the .stepy-legend element, use CSS for it.
289 |
375 | $('form').stepy({ description: false });
376 |
377 | 382 | Enter 383 |
384 | 385 |
386 | By default, when you press the key enter, the next step will be called giving you a better usability.
387 | If the option validate is enabled, then the step will be validated before.
388 |
474 | $('form').stepy({ enter: true });
475 |
476 | 481 | Finish Button 482 |
483 | 484 |485 | The selector of you finish button. 486 |
487 | 488 |
572 | $('form').stepy({ finishButton: false });
573 |
574 | 579 | Finish 580 |
581 | 582 |
583 | Callback to be called when you press the finish button. Inside it you can prevent the submit returning false.
584 | The element that will trigger can be a submit type element or any other button with the class stepy-finish.
585 |
671 | $('form').stepy({
672 | finish: function() {
673 | alert('Canceling...');
674 | return false;
675 | }
676 | });
677 |
678 | 683 | Legend 684 |
685 | 686 |
687 | Display the .stepy-legend element on fieldset.
688 | When this option is false, it's just hidden. The content of the .stepy-legend element will be used to set the header description.
689 |
775 | $('form').stepy({ legend: false });
776 |
777 | 781 | Next 782 |
783 | 784 |
785 | This callback is trigged before you go to the next step.
786 | Like the other callback, if you return false it won't go to the next step.
787 | Here you can do your own validation, manually or using your favorite plugin.
788 |
874 | $('form').stepy({
875 | next: function(index, totalSteps) {
876 | alert('Going to step: ' + index + ' with total of steps: ' + totalSteps);
877 | }
878 | });
879 |
880 | 884 | Back 885 |
886 | 887 |
888 | This callback is trigged before you go to the back step.
889 | Like the other callback, if you return false it won't go to the back step.
890 |
976 | $('form').stepy({
977 | back: function(index, totalSteps) {
978 | alert('Returning to step: ' + index + ' with total of steps: ' + totalSteps);
979 | }
980 | });
981 |
982 | 987 | Select 988 |
989 | 990 |
991 | This callback is trigged when the current step is rendered.
992 | Here you can do actions to manipulate the current step with the elements shown to the user.
993 |
1079 | $('form').stepy({
1080 | select: function(index, totalSteps) {
1081 | alert('Rendered step: ' + index + ' with total of steps: ' + totalSteps);
1082 | }
1083 | });
1084 |
1085 | 1090 | Title Target 1091 |
1092 | 1093 |
1094 | You can change the place where the header will be rendered passing the selector of the element where the header will be appended.
1095 |
1183 | $('form').stepy({ titleClick: true });
1184 |
1185 | 1190 | Transition and Duration 1191 |
1192 | 1193 |
1194 | You can set an effect during the transitions between the steps.
1195 | You can choose fade, slide or undefined for the normal transition.
1196 |
1282 | $('form').stepy({
1283 | duration : 400,
1284 | transition: 'fade'
1285 | });
1286 |
1287 | 1292 | Header 1293 |
1294 | 1295 |
1296 | If you don't want a header, you can just change header to false and it won't be created.
1297 |
1375 | $('form').stepy({ header: false });
1376 |
1377 | 1382 | backButton 1383 |
1384 | 1385 |
1386 | The class to find the back button inside each step.
1387 |
1471 | $('form').stepy({ backButton: '.stepy-back' });
1472 |
1473 | 1478 | nextButton 1479 |
1480 | 1481 |
1482 | The class to find the back button inside each step.
1483 |
1567 | $('form').stepy({ nextButton: '.stepy-next' });
1568 |
1569 | 1574 | Global Buttons 1575 |
1576 | 1577 |
1578 | If you wish, you can use global buttons to control the steps, just put it where you want.
1579 |
1657 | $('form').stepy({ nextButton: '.stepy-next' });
1658 |
1659 | 1664 | validate 1665 |
1666 | 1667 |1668 | You can integrate any plugin of validation on your steps, just saying if each field is valid or not. 1669 |
1670 | 1671 |
1747 | $('form').stepy({ nextButton: '.stepy-next' });
1748 |
1749 | 1754 | block 1755 |
1756 | 1757 |1758 | This options blocks the navigation to next step if the current is invalid. 1759 |
1760 | 1761 |
1837 | $('form').stepy({ nextButton: '.stepy-next' });
1838 |
1839 | 1844 | Options: 1845 |
1846 | 1847 |Callback before the backward action.
1850 |Block the next step if the current is invalid.
1855 |Choose if the descriptions of the titles will be showed.
1860 |Duration of the transition between steps in ms.
1865 |Enables the enter key to change to the next step.
1870 |If an error occurs, a image is showed in the title of the corresponding step.
1875 |Callback before the finish action.
1880 |Include the button with class called '.finish' into the last step.
1885 |Creates a header with title and description.
1890 |Choose the fields to be ignored on validation.
1895 |Choose if the legends of the steps will be showed.
1900 |Callback before the forward action.
1905 |Callback executed when the step is shown.
1910 |Active the back and next action in the titles.
1915 |Choose the place where titles will be placed.
1920 |Use transition between steps ('hide', 'fade' or 'slide').
1925 |Callback to each field of each step.
1930 |1933 | Changing the settings globally: 1934 |
1935 | 1936 |
1937 | You can change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.
1938 |
1942 | $.fn.stepy.defaults.validate = true;
1943 | $.fn.stepy.defaults.titleClick = true;
1944 |
1945 | 1950 | Functions: 1951 |
1952 | 1953 |
1956 | $('form').stepy('step');
1957 |
1958 | Goes to the given step.
1961 |
1966 | $('form').stepy('destroy');
1967 |
1968 | Destroy the Stepy's bind and gives you the raw element before it.
1971 |
1975 |
1977 | Ruby, Java and Python Developer in R7.com Portal.
1978 | Bachelor's in Information Systems and certified OCJA 1.0 and OCJP 6.
1979 | Helper and learner of the open source community, and designer adventurer.
1980 | Also has a passion for dance, skate, jiu-jitsu and Counter Strike Source. (:
1981 |