Refactor code structure for improved readability and maintainability
This commit is contained in:
77
modules/lib/stepy/README.markdown
Normal file
77
modules/lib/stepy/README.markdown
Normal file
@ -0,0 +1,77 @@
|
||||
# jQuery Stepy - A Wizard Plugin - http://wbotelhos.com/stepy
|
||||
|
||||
jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard.
|
||||
|
||||
## Version
|
||||
|
||||
@version 1.1.0
|
||||
@since 2010.07.03
|
||||
@author Washington Botelho
|
||||
@documentation wbotelhos.com/stepy
|
||||
@twitter twitter.com/wbotelhos
|
||||
|
||||
## Required Files
|
||||
|
||||
+ jquery.stepy.min.js
|
||||
+ jquery.stepy.css
|
||||
|
||||
## Default values
|
||||
|
||||
back: undefined // Callback before the backward action.
|
||||
backLabel: '< Back' // Change the back button label.
|
||||
block: false // Block the next step if the current is invalid.
|
||||
description: false // Choose if the descriptions of the titles will be showed.
|
||||
errorImage: false // If an error occurs, a image is showed in the title of the corresponding step.
|
||||
finish: undefined // Callback before the finish action.
|
||||
finishButton: true // Include the button with class called '.finish' into the last step.
|
||||
ignore: '' // Choose the fields to be ignored on validation.
|
||||
legend: false // Choose if the legends of the steps will be showed.
|
||||
nextLabel: 'Next >' // Change the next button label.
|
||||
next: undefined // Callback before the forward action.
|
||||
titleClick: true // Active the back and next action in the titles.
|
||||
titleTarget: undefined // Choose the place where titles will be placed.
|
||||
select: undefined // Callback executed when the step is shown.
|
||||
validate: false // Active the jQuery Validation for each step.
|
||||
|
||||
## Usage with default values
|
||||
|
||||
$('#step').stepy();
|
||||
|
||||
<form id="step">
|
||||
<fieldset title="Step 1">
|
||||
<legend>description one</legend>
|
||||
<!-- input fields -->
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Step 2">
|
||||
<legend>description two</legend>
|
||||
<!-- input fields -->
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" class="finish"/>
|
||||
</form>
|
||||
|
||||
## Public functions
|
||||
|
||||
$('#step').stepy('step', 2); // Change the form to the second step.
|
||||
|
||||
## Contributors:
|
||||
|
||||
+ Almir Mendes
|
||||
+ Andrey Fedoseev
|
||||
+ Igor Tamashchuk
|
||||
+ Rafael Machado
|
||||
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2012 Washington Botelho
|
||||
|
||||
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.
|
||||
|
||||
## Buy me a coffee
|
||||
|
||||
You can do it by [PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X8HEP2878NDEG&item_name=jQuery%20Stepy). Thanks! (:
|
||||
90
modules/lib/stepy/changelog.markdown
Normal file
90
modules/lib/stepy/changelog.markdown
Normal file
@ -0,0 +1,90 @@
|
||||
# jQuery Stepy - A Wizard Plugin - http://wbotelhos.com/stepy
|
||||
|
||||
### 1.1.0
|
||||
|
||||
+ Added 'ignore' option to choose the fields to be ignored on validation:
|
||||
- It must be blank '' to override jQuery Validation 1.9.0 default value and avoid error;
|
||||
- I hope my fix be accepted, then this option may be used freely;
|
||||
- But, you never can use ':hidden' as the do, because Wizards needs to validate hidden steps/fields. (;
|
||||
+ Fixed the index number given to Stepy binded by class without id.
|
||||
|
||||
### 1.0.0
|
||||
|
||||
+ Now we using the best pratice to build the plugin;
|
||||
+ Now the plugin is under test with Jasmine and Jasmine jQuery;
|
||||
+ Now public functions is on context scope instead on $.fn;
|
||||
+ Added support to validation to the function .stepy('step', number);
|
||||
+ Added the 'select' callback to execute action when a step is displayed; (by Daniel Hoelbling)
|
||||
+ Fixed the several invocation of select step on each validation;
|
||||
+ Fixed validation to disabled fields do not validate;
|
||||
+ Fixed validations when jQuery Validation returns undefined and blocks; (by Rafael Machado)
|
||||
+ Better look of documentations using markdown. (by Almir Mendes)
|
||||
|
||||
### 0.5.1
|
||||
|
||||
+ Fixed the focus of the first error field (reported by luckyong);
|
||||
+ Avoided highlight only the first field when has multiple invalids fields on the form.
|
||||
|
||||
### 0.5.0
|
||||
|
||||
+ Added the 'titleTarget' attribute to choose the place where titles will be placed;
|
||||
+ Added the 'legend' attribute to choose if the legends of the steps will be showed;
|
||||
+ Added the 'description' attribute to choose if the descriptions of the titles will be showed;
|
||||
+ Added the 'finish' callback attribute that enables action before finish the steps;
|
||||
+ Fixed the possible bug when the ID has more than one word or has number;
|
||||
+ Fixed the possible bug when the ID has more than one word or has number;
|
||||
+ Fixed: avoided the validation of the lastest step when the validation is not enabled;
|
||||
+ Fixed: when there is only one step, the finish button does not appear; (reported by DevPHP)
|
||||
+ The 'onBack' attribute was named just to 'back';
|
||||
+ The 'onNext' attribute was named just to 'next';
|
||||
+ The 'finish' attribute was named to 'finishButton';
|
||||
+ The 'back' and 'next' callback no longer has a default function;
|
||||
+ The finish button is now required for any kind of step if that option is enabled;
|
||||
+ Keeped the options as data called 'options' in the wrapper element to future usages.
|
||||
|
||||
### 0.4.1
|
||||
|
||||
+ Fixed: the validation highlighted only the first field. (fixed by legigor)
|
||||
|
||||
### 0.4.0
|
||||
|
||||
+ Now the enter key goes to next step and just validate the currrent one; (reported by hennaTheGreat)
|
||||
+ Public functions now supports actions by class; (reported by hennaTheGreat)
|
||||
+ Public functions without specify ID or class is no longer supported;
|
||||
+ Now when you to press the enter key into any text field, the form will go to next step;
|
||||
+ Fixed: when the stepy has only one step the next button is not applied;
|
||||
+ Fixed the title click when the number is higher than 10; (reported by neha1312)
|
||||
+ Added ID to the set of titles to be possible to move the titles;
|
||||
+ Added class to buttons container to simplify styling. (fixed by andreyfedoseev)
|
||||
|
||||
### 0.3.0
|
||||
|
||||
+ Added the 'onBack' attribute that enables action before the backward transition;
|
||||
+ Added the 'onNext' attribute that enables action before the forward transition;
|
||||
|
||||
### 0.2.0
|
||||
|
||||
+ Added the 'block' attribute that blocks the next step if the current is invalid;
|
||||
+ Added the 'errorImage' attribute that show a imagem in the title of the corresponding step if an error occur;
|
||||
+ Now you can pass a optionally ID to be the target of the public function's actions;
|
||||
+ All the code was refactored and improved.
|
||||
|
||||
### 0.1
|
||||
|
||||
+ Added a backLabel and nextLabel parameter to specify the labels of the corresponding buttons;
|
||||
+ Added click on the title and description to go to the corresponding step;
|
||||
+ Added a public function 'step' that is possible choose which step to go;
|
||||
+ Added auto-focus in the first field of each step when it is the current;
|
||||
+ Added the parameter includeFinish to format and embed the button with class named ".finish" to the last step;
|
||||
+ Added function that automatically takes the title of the fieldset and become it as title of each step;
|
||||
+ Now is possible to use more than one wizard on the same page;
|
||||
+ Created default options;
|
||||
+ Changed the function bind to newest live;
|
||||
+ The links with # were changed to javascript:void(0) to prevent the page go up;
|
||||
+ Changed to HTML code the special characters;
|
||||
+ Removed the container tha was wrapped the fieldsets and added the actions directly on it;
|
||||
+ Removed unused arguments form binds functions;
|
||||
+ Changed the selectors for the same current element $(this);
|
||||
+ Changed the extends to a defaults developers plugins;
|
||||
+ Keys were placed on single line blocks to avoid error on IE;
|
||||
+ Changed the styles name with a hifen style;
|
||||
445
modules/lib/stepy/index.html
Normal file
445
modules/lib/stepy/index.html
Normal file
@ -0,0 +1,445 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
|
||||
<title>jQuery Stepy - A Wizard Plugin</title>
|
||||
|
||||
<!-- This CSS does not belong to the plugin. -->
|
||||
<link type="text/css" rel="stylesheet" href="doc/css/stylesheet.css"/>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="css/jquery.stepy.css" />
|
||||
|
||||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||
|
||||
<!-- Optionaly -->
|
||||
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/jquery.stepy.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// This code does NOT belong the plugin. See the example code at the bottom of this page.
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-194992347-4']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="title">
|
||||
<a href="http://wbotelhos.com/stepy">jQuery Stepy - A Wizard Plugin</a>
|
||||
<span>(current version: 1.1.0)</span>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<a href="http://github.com/downloads/wbotelhos/stepy/jquery.stepy-1.1.0.zip" target="_blank">Download</a> |
|
||||
<a href="http://github.com/wbotelhos/stepy" target="_blank">Github</a> |
|
||||
<a href="http://www.wbotelhos.com/stepy/changelog.markdown" target="_blank">Change Log</a> |
|
||||
<a href="http://www.wbotelhos.com/stepy/README.markdown" target="_blank">Readme</a> |
|
||||
<a href="http://www.wbotelhos.com/2011/03/14/jquery-stepy-a-wizard-plugin" target="_blank">Article</a> |
|
||||
<a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">License</a> |
|
||||
<a href="http://www.wbotelhos.com/stepy/who.html" target="_blank">Who is using</a> |
|
||||
<a href="http://www.wbotelhos.com/2011/03/14/jquery-stepy-a-wizard-plugin#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> |
|
||||
<a href="http://www.wbotelhos.com/labs" target="_blank" style="color: #000;">yLab</a>
|
||||
</div>
|
||||
|
||||
<a id="coffee" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X8HEP2878NDEG&item_name=jQuery%20Stepy" target="_blank">buy me a coffee</a>
|
||||
|
||||
<div class="description">jQuery <strong>Stepy</strong> is a plugin based on FormToWizard that generates a customizable wizard.</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="checkbox-default-demo" class="session-first">With default options using checkbox:</div>
|
||||
|
||||
<form id="default">
|
||||
<fieldset title="Step 1">
|
||||
<legend>description one</legend>
|
||||
<label>User:</label> <input type="text" value="wbotelhos" size="40" disabled="disabled" /> <!-- Disabled fields are not focused. -->
|
||||
<label>E-mail:</label> <input type="text" size="40" />
|
||||
<label>Password:</label> <input type="password" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Step 2">
|
||||
<legend>description two</legend>
|
||||
<label>Nick Name:</label> <input type="text"size="30" />
|
||||
<label>Bio:</label> <textarea rows="5" cols="60"></textarea>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" class="finish" value="Finish!" />
|
||||
</form>
|
||||
|
||||
<div class="source">
|
||||
$('#step').stepy();
|
||||
</div>
|
||||
|
||||
<div id="custom-demo" class="session">A custom form in a validation style:</div>
|
||||
|
||||
<form id="custom">
|
||||
<fieldset title="Thread 1">
|
||||
<legend>description one</legend>
|
||||
|
||||
<label>User:</label>
|
||||
<!-- Hidden fields are not focused. -->
|
||||
<input type="hidden" name="hidden" />
|
||||
|
||||
<!-- Disabled fields are not validated. -->
|
||||
<input type="text" value="wbotelhos" size="40" name="user" disabled="disabled" />
|
||||
|
||||
<label>E-mail:</label>
|
||||
<input type="text" size="40" name="email" />
|
||||
<input type="checkbox" name="checked" /> Checked?
|
||||
|
||||
<label>Newsletter?</label>
|
||||
<input type="radio" name="newsletter" /> Yep
|
||||
<input type="radio" name="newsletter" /> Nop
|
||||
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Thread 2">
|
||||
<legend>description two</legend>
|
||||
|
||||
<label>Nick Name:</label>
|
||||
<input type="text" size="30" />
|
||||
|
||||
<label>Bio:</label>
|
||||
<textarea name="bio" rows="5" cols="60"></textarea>
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Thread 3">
|
||||
<legend>description three</legend>
|
||||
|
||||
<label>Birthday:</label>
|
||||
<select name="day">
|
||||
<option></option>
|
||||
<option>23</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option>10</option>
|
||||
</select>
|
||||
|
||||
<select>
|
||||
<option>1984</option>
|
||||
</select>
|
||||
|
||||
<label>Site:</label>
|
||||
<input type="text" name="site" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" class="finish" value="Finish!" />
|
||||
</form><br/>
|
||||
|
||||
<div class="source">
|
||||
$('#step').stepy({<br/>
|
||||
backLabel: 'Backward',<br/>
|
||||
block: true,<br/>
|
||||
errorImage: true,<br/>
|
||||
nextLabel: 'Forward',<br/>
|
||||
titleClick: true,<br/>
|
||||
validate: true<br/>
|
||||
});
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- When the attribute 'validate' is true, you must include the jquery.validate.js.
|
||||
</span><br/>
|
||||
|
||||
<div id="step-demo" class="session">With just step without form:</div>
|
||||
|
||||
<div id="step">
|
||||
<fieldset title="Image 1">
|
||||
<legend>description one</legend><br/>
|
||||
<center><img src="doc/img/image-1.png" alt="" /></center>
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Image 2">
|
||||
<legend>description two</legend><br/>
|
||||
<center><img src="doc/img/image-2.png" alt="" /></center>
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Image 3">
|
||||
<legend>description three</legend><br/>
|
||||
<center><img src="doc/img/image-3.png" alt="" /></center>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="source">
|
||||
$('div#step').stepy({<br/>
|
||||
finishButton: false<br/>
|
||||
});
|
||||
</div>
|
||||
|
||||
<div id="callback-demo" class="session">With transitions callback:</div>
|
||||
|
||||
<form id="callback">
|
||||
<fieldset title="Step 1">
|
||||
<legend>description one</legend>
|
||||
<label>Name:</label>
|
||||
<input type="text" size="40" />
|
||||
|
||||
<label>E-mail:</label>
|
||||
<input type="text" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Step 2">
|
||||
<legend>description two</legend>
|
||||
<label>User:</label>
|
||||
<input type="text"size="40" />
|
||||
|
||||
<label>Password:</label>
|
||||
<input type="password" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Step 3">
|
||||
<legend>description three</legend>
|
||||
|
||||
<label>Nick Name:</label>
|
||||
<input type="text" size="40" />
|
||||
|
||||
<label>Age:</label>
|
||||
<input type="text" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="Step 4">
|
||||
<legend>description four</legend>
|
||||
<label>Bio:</label>
|
||||
<input type="text"size="40" />
|
||||
|
||||
<label>Detail:</label>
|
||||
<input type="password" size="40" />
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" class="finish" value="Finish!" />
|
||||
</form>
|
||||
|
||||
<div class="source">
|
||||
$('#step').stepy({<br/>
|
||||
back: function(index) {<br/>
|
||||
alert('Going to step ' + index + '...');<br/>
|
||||
}, next: function(index) {<br/>
|
||||
if (!isValid()) {<br/>
|
||||
alert('Invalid random value!');<br/>
|
||||
return false;<br/>
|
||||
}<br/><br/>
|
||||
|
||||
alert('Going to step ' + index + '...');<br/>
|
||||
}, select: function(index) {<br/>
|
||||
alert('Current step ' + index + '.');<br/>
|
||||
}, finish: function(index) {<br/>
|
||||
alert('Finishing on step ' + index + '...');<br/>
|
||||
},<br/>
|
||||
titleClick: true<br/>
|
||||
});
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- You can do validations during the callback;<br/>
|
||||
- Return "false" to prevent the transition;<br/>
|
||||
- Return "true" or nothing to continue the transition;<br/>
|
||||
- If the Stepy is a form and the finish element is not a submit type, then .submit() will be invoked.
|
||||
</span><br/>
|
||||
|
||||
<div id="target-demo" class="session">With target for the titles and custom legend and description:</div>
|
||||
|
||||
<form id="target">
|
||||
<fieldset title="1">
|
||||
<legend>--</legend>
|
||||
<center><img src="doc/img/image-3.png" alt="" /></center>
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="2">
|
||||
<legend>--</legend>
|
||||
<center><img src="doc/img/image-1.png" alt="" /></center>
|
||||
</fieldset>
|
||||
|
||||
<fieldset title="3">
|
||||
<legend>--</legend>
|
||||
<center><img src="doc/img/image-2.png" alt="" /></center>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" class="finish" value="Finish!" />
|
||||
</form>
|
||||
|
||||
<div id="title-target"></div>
|
||||
|
||||
<div class="source">
|
||||
<div id="title-target"></div><br/><br/>
|
||||
|
||||
$('#step').stepy({<br/>
|
||||
description: false,<br/>
|
||||
legend: false,<br/>
|
||||
titleClick: true,<br/>
|
||||
titleTarget: '#title-target'<br/>
|
||||
});<br/>
|
||||
</div><br/>
|
||||
|
||||
<span class="comment">
|
||||
- You can choose any specific target;<br/>
|
||||
- Even if the fieldset has legend, it will not appear if legend attribute is false;<br/>
|
||||
- The description depends of the legend element. Even with legend attribute setted to false;<br/>
|
||||
- The finish button can be any element you want, since it has the class name 'finish'.
|
||||
</span><br/>
|
||||
|
||||
<div class="session">HTML structure:</div>
|
||||
|
||||
<div class="source">
|
||||
<form id="step"><br/>
|
||||
<fieldset title="Title"><br/>
|
||||
<legend>description</legend><br/>
|
||||
<span class="comment-html"><!-- input fields --></span><br/>
|
||||
</fieldset><br/><br/>
|
||||
|
||||
<fieldset title="Title"><br/>
|
||||
<legend>description</legend><br/>
|
||||
<span class="comment-html"><!-- input fields --></span><br/>
|
||||
</fieldset><br/><br/>
|
||||
|
||||
<input type="submit" class="finish"/><br/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<span class="comment">
|
||||
- The fieldset's title is the main title of the step and the legend is the description of it.
|
||||
</span>
|
||||
|
||||
<div class="session">Default options:</div>
|
||||
|
||||
<div class="source">
|
||||
back: undefined<br/>
|
||||
<div class="comment">Callback before the backward action.</div>
|
||||
|
||||
backLabel: '< Back'<br/>
|
||||
<div class="comment">Change the back button label.</div>
|
||||
|
||||
block: false<br/>
|
||||
<div class="comment">* Block the next step if the current is invalid.</div>
|
||||
|
||||
description: false<br/>
|
||||
<div class="comment">Choose if the descriptions of the titles will be showed.</div>
|
||||
|
||||
errorImage: false<br/>
|
||||
<div class="comment">* If an error occurs, a image is showed in the title of the corresponding step.</div>
|
||||
|
||||
finish: undefined<br/>
|
||||
<div class="comment">Callback before the finish action.</div>
|
||||
|
||||
finishButton: true<br/>
|
||||
<div class="comment">Include the element with class name '.finish' into the last step.</div>
|
||||
|
||||
ignore: ''<br/>
|
||||
<div class="comment">Choose the fields to be ignored on validation.</div>
|
||||
|
||||
legend: false<br/>
|
||||
<div class="comment">Choose if the legends of the steps will be showed.</div>
|
||||
|
||||
nextLabel: 'Next >'
|
||||
<div class="comment">Change the next button label.</div>
|
||||
|
||||
next: undefined<br/>
|
||||
<div class="comment">Callback before the forward action.</div>
|
||||
|
||||
titleClick: true<br/>
|
||||
<div class="comment">Active the back and next action in the titles.</div>
|
||||
|
||||
titleTarget: ''<br/>
|
||||
<div class="comment">Choose the place where titles will be placed.</div>
|
||||
|
||||
select: undefined<br/>
|
||||
<div class="comment">Callback executed when the step is shown.</div>
|
||||
|
||||
validate: false<br/>
|
||||
<div class="comment">* Active the jQuery Validation for each step.</div>
|
||||
</div>
|
||||
|
||||
<div class="description-code">* Depends of <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jquery.validation.js</a>.</div>
|
||||
|
||||
<div class="session">Public functions:</div>
|
||||
|
||||
<div class="source">$('#step').stepy('step', 2);</div>
|
||||
<div class="description-code">Change the form to step 2.</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div id="copy">© 2010 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
$('#default').stepy();
|
||||
|
||||
$('#custom').stepy({
|
||||
backLabel: 'Backward',
|
||||
block: true,
|
||||
errorImage: true,
|
||||
nextLabel: 'Forward',
|
||||
titleClick: true,
|
||||
validate: true
|
||||
});
|
||||
|
||||
$('div#step').stepy({
|
||||
finishButton: false
|
||||
});
|
||||
|
||||
// Optionaly
|
||||
$('#custom').validate({
|
||||
errorPlacement: function(error, element) {
|
||||
$('#custom div.stepy-error').append(error);
|
||||
}, rules: {
|
||||
'user': { maxlength: 1 },
|
||||
'email': 'email',
|
||||
'checked': 'required',
|
||||
'newsletter': 'required',
|
||||
'password': 'required',
|
||||
'bio': 'required',
|
||||
'day': 'required'
|
||||
}, messages: {
|
||||
'user': { maxlength: 'User field should be less than 1!' },
|
||||
'email': { email: 'Invalid e-mail!' },
|
||||
'checked': { required: 'Checked field is required!' },
|
||||
'newsletter': { required: 'Newsletter field is required!' },
|
||||
'password': { required: 'Password field is requerid!' },
|
||||
'bio': { required: 'Bio field is required!' },
|
||||
'day': { required: 'Day field is requerid!' }
|
||||
}
|
||||
});
|
||||
|
||||
$('#callback').stepy({
|
||||
back: function(index) {
|
||||
alert('Going to step ' + index + '...');
|
||||
}, next: function(index) {
|
||||
if ((Math.random() * 10) < 5) {
|
||||
alert('Invalid random value!');
|
||||
return false;
|
||||
}
|
||||
|
||||
alert('Going to step ' + index + '...');
|
||||
}, select: function(index) {
|
||||
alert('Current step ' + index + '.');
|
||||
}, finish: function(index) {
|
||||
alert('Finishing on step ' + index + '...');
|
||||
}, titleClick: true
|
||||
});
|
||||
|
||||
$('#target').stepy({
|
||||
description: false,
|
||||
legend: false,
|
||||
titleClick: true,
|
||||
titleTarget: '#title-target'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user