445 lines
15 KiB
HTML
445 lines
15 KiB
HTML
<!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> |