# jQuery Smart Wizard
Version 3 and later at
http://mstratman.github.com/jQuery-Smart-Wizard/
Original version 2 and earlier are from
http://www.techlaboratory.net/products.php?product=smartwizard
Licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
http://creativecommons.org/licenses/by-sa/3.0/
## Getting Started
Basic Usage:
```javascript
$('#wizard').smartWizard();
```
Using with option parameters:
```javascript
$('#wizard').smartWizard({
// Properties
selected: 0, // Selected Step, 0 = first step
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
enableAllSteps: false, // Enable/Disable all steps on first load
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentURL:null, // specifying content url enables ajax content loading
contentURLData:null, // override ajax query parameters
contentCache:true, // cache step contents, if false content is fetched always from ajax url
cycleSteps: false, // cycle step navigation
enableFinishButton: false, // makes finish button enabled always
hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead
errorSteps:[], // array of step numbers to highlighting as error steps
labelNext:'Next', // label for Next button
labelPrevious:'Previous', // label for Previous button
labelFinish:'Finish', // label for Finish button
noForwardJumping:false,
// Events
onLeaveStep: null, // triggers when leaving a step
onShowStep: null, // triggers when showing a step
onFinish: null // triggers when Finish button is clicked
});
```
Parameters and Events are describing on the table below.
## Installing Smart Wizard 3
### Step 1: Include Files
Include the following JavaScript and css files on your page.
1. jQuery Library file (Don't include if you already have it on your page)
2. CSS(Style Sheet) file for Smart Wizard
3. JavaScript plug-in file for Smart Wizard
To include the files copy and paste the below lines inside the head tag (`<head> </head>`) of your page.
Make sure the paths to the files are correct with your working environment.
```html
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href="smart_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.smartWizard.js"></script>
```
### Step 2: The JavaScript
Inititialize the Smart Wizard, copy and paste the below lines inside the head tag (`<head> </head>`) of your page
```html
<script type="text/javascript">
$(document).ready(function() {
// Initialize Smart Wizard
$('#wizard').smartWizard();
});
</script>
```
### Step 3: The HTML
Finally the html, below shows the HTML markup for the Smart Wizard, You can customize it by including your on contents for each steps.
Copy and paste the below html inside the body tag (`<body></body>`) of your page.
```html
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
<span class="stepDesc">
Step 1<br />
<small>Step 1 description</small>
</span>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
<span class="stepDesc">
Step 2<br />
<small>Step 2 description</small>
</span>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
<span class="stepDesc">
Step 3<br />
<small>Step 3 description</small>
</span>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
<span class="stepDesc">
Step 4<br />
<small>Step 4 description</small>
</span>
</a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Step 1 Content</h2>
<!-- step content -->
</div>
<div id="step-2">
<h2 class="StepTitle">Step 2 Content</h2>
<!-- step content -->
</div>
<div id="step-3">
<h2 class="StepTitle">Step 3 Title</h2>
<!-- step content -->
</div>
<div id="step-4">
<h2 class="StepTitle">Step 4 Title</h2>
<!-- step content -->
</div>
</div>
```
## More details & descriptions:
### Load ajax content
To load the content via ajax call you need to specify the property "*contentURL*".
example:
```html
<script type="text/javascript">
$(document).ready(function() {
// Initialize Smart Wizard with ajax content load
$('#wizard').smartWizard({contentURL:'services/ajaxcontents.php'});
});
</script>
```
When a step got focus the SmartWizard will post the step number to this contentURL and so you can write server side logic to format the content with the step number to be shown next. The response to this call should be the content of that step in HTML format.
To get the step number in php:
```php
$step_number = $_REQUEST["step_number"];
```
By default the SmartWizard will fetch the step content only on the first focus of the step, and cache the content and use it on the further focus of that step. But you can turn off the content cache by specifying the property "*contentCache*" to false.
example:
```html
<script type="text/javascript">
$(document).ready(function() {
// Initialize Smart Wizard with ajax content load and cache disabled
$('#wizard').smartWizard({contentURL:'services/ajaxcontents.php',contentCache:false});
});
</script>
```
Please see the ajax contents demo and following files on the source code to know how ajax content loading is implemented.
1. *smartwizard2-ajax.htm*
2. *services/service.php*
### Input validation
Smart Wizard 3 does not have in-built form validation, but you can call you own validation function for each steps or for all steps with the events. Smart Wizard 3 has three events (*onLeaveStep*, *onShowStep*, *onFinish*). So you can write your step validation login in "*onLeaveStep*" event and on validation fail you can stay on that step by cancelling that event. Validation logic for all steps can be write on "*onFinish*" event and so you can avoid submitting the form with errors.
example:
```html
<script type="text/javascript">
$(document).ready(function(){
// Smart Wizard
$('#wizard').smartWizard({
onLeaveStep:leaveAStepCallback,
onFinish:onFinishCallback
});
function leaveAStepCallback(obj, context){
alert("Leaving step " + context.fromStep + " to go to step " + context.toStep);
return validateSteps(context.fromStep); // return false to stay on step and true to continue navigation
}
function onFinishCallback(objs, context){
if(validateAllSteps()){
$('form').submit();
}
}
// Your Step validation logic
function validateSteps(stepnumber){
var isStepValid = true;
// validate step 1
if(stepnumber == 1){
// Your step validation logic
// set isStepValid = false if has errors
}
// ...
}
function validateAllSteps(){
var isStepValid = true;
// all step validation logic
return isStepValid;
}
});
</script>
```
Please see the step validation demo and *smartwizard2-validation.php* in the source code to know how step input validation is implemented.
### Highlight error steps
Highlighting error steps in Smart Wizard is easy
```javascript
$('#wizard').smartWizard('setError',{stepnum:3,iserror:true});
```
It takes two arguments
1. stepnum :- Step number to which is highlighted as error
2. iserror :- true = set the step as error step and false = remove the error highlighting
example:
```html
<script type="text/javascript">
$(document).
实现iframe嵌套，适合CMS，CRM等后台框架 （202个子文件） 
.babelrc 146B top_nav.html.bak 70KB index.js.bak 13KB .commitlintrc 48B lanai-ui.min.css 419KB viewer.css 9KB viewer.css 9KB viewer.min.css 7KB smart_wizard_vertical.css 6KB smart_wizard.css 6KB main.css 2KB demo_style.css 2KB index.css 24B .editorconfig 147B fontawesome-webfont.eot 162KB .eslintrc 144B .eslintrc 83B
zTreeStandard.gif 5KB loader.gif 5KB loading-sm.gif 3KB loading.gif 381B default-50x50.gif 184B line_conn.gif 45B .gitattributes 66B .gitignore 19B smartwizard2-multiple.htm 18KB smartwizard2-vertical.htm 11KB index.htm 10KB smartwizard2-ajax.htm 9KB smartwizard2-ajax.htm 2KB smartwizard2-validation.htm 2KB
icons.html 132KB index.edit_sidebar.html 72KB top_nav.html 70KB index.html 69KB tree.html 22KB wizards.html 22KB forms.html 18KB index.html 17KB buttons.html 13KB menu.html 12KB grid.html 11KB profile.html 11KB tabs.html 11KB message.html 10KB panel.html 10KB fyAlert.html 9KB table.html 7KB invoice.html 7KB data.html 7KB progress.html 7KB timeline.html 5KB invoice-print.html 5KB Tree-with-table.html 5KB jqgrid.html 4KB video.html 3KB carousel.html 3KB navtab.html 3KB views.html 3KB login.html 3KB register.html 2KB auxiliar.html 2KB layout.html 1KB 404.html 1KB 500.html 893B test.html 706B key.html 1B blank.html 1B favicon.ico 3B
photo4.jpg 1.12MB nvdi.jpg 688KB tibet-4.jpg 527KB zfb.JPG 463KB wx.JPG 440KB timg-1.jpg 410KB photo3.jpg 383KB tibet-5.jpg 374KB sl.jpg 366KB tibet-7.jpg 298KB tibet-2.jpg 235KB tibet-9.jpg 220KB tibet-8.jpg 209KB tibet-3.jpg 207KB timg-3.jpg 180KB tibet-6.jpg 160KB timg-2.jpg 156KB ckin.jpg 124KB boxed-bg.jpg 121KB tibet-1.jpg 113KB tibet-4.jpg 75KB tibet-7.jpg 67KB tibet-5.jpg 65KB tibet-3.jpg 45KB tibet-6.jpg 44KB timg-4.jpg 44KB tibet-8.jpg 43KB tibet-2.jpg 40KB nm.jpg 38KB tibet-1.jpg 31KB lf.jpg 31KB共 202 条
- 1
- 2
- 3
资源评论
