6a6db2ea23
Update also fix some following problem: - Switcher now working - Datatable header fix example is now working - Add missing starrr ratings - Some mobile responsiveness on table.html page
326 lines
19 KiB
HTML
326 lines
19 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>Smart Wizard 2 - Multiple Wizard Example - a javascript jQuery wizard control plugin</title>
|
|
<link href="styles/demo_style.css" rel="stylesheet" type="text/css">
|
|
|
|
<link href="styles/smart_wizard.css" rel="stylesheet" type="text/css">
|
|
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
|
|
<script type="text/javascript" src="js/jquery.smartWizard.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
// Wizard 1
|
|
$('#wizard1').smartWizard({transitionEffect:'fade',onFinish:onFinishCallback});
|
|
// Wizard 2
|
|
$('#wizard2').smartWizard({transitionEffect:'slide',onFinish:onFinishCallback});
|
|
function onFinishCallback(){
|
|
alert('Finish Called');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</head><body>
|
|
|
|
|
|
<div class="demoHead">
|
|
<div>
|
|
<div style="float:left;">
|
|
<h1>Smart Wizard 3</h1>
|
|
<h2>a javascript jQuery wizard control plugin</h2>
|
|
</div>
|
|
<div style="float:right;" class="demoNavLinks">
|
|
<a href="https://github.com/mstratman/jQuery-Smart-Wizard/tarball/master" class="btn">Download</a>
|
|
<a href="https://github.com/mstratman/jQuery-Smart-Wizard/blob/master/README.md" class="btn">Documentation</a>
|
|
<a href="https://github.com/mstratman/jQuery-Smart-Wizard" class="btn">Github</a>
|
|
</div>
|
|
<div style="clear:both;"></div>
|
|
</div>
|
|
|
|
<div style="margin-top:15px;">
|
|
<div style="float:left"><h3>Examples:</h3></div>
|
|
<div style="float:left" class="demoExampleLinks">
|
|
<a href="index.htm" class="btn">Basic Example</a>
|
|
<a href="smartwizard2-vertical.htm" class="btn">Vertical Style</a>
|
|
<a href="smartwizard2-multiple.htm" class="btn selected">Multiple Wizards</a>
|
|
<a href="smartwizard2-ajax.htm" class="btn">Ajax Contents</a>
|
|
<a href="smartwizard2-validation.htm" class="btn">Step Validation</a>
|
|
</div>
|
|
<div style="clear:both;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0">
|
|
<tr><td>
|
|
<h2>Example: Multiple Wizards</h2>
|
|
<!-- Smart Wizard wizard1-->
|
|
<h3>Wizard 1</h3>
|
|
<div id="wizard1" 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>
|
|
<ul type="disk">
|
|
<li>List 1</li>
|
|
<li>List 2</li>
|
|
</ul>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<div id="step-2">
|
|
<h2 class="StepTitle">Step 2 Content</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<div id="step-3">
|
|
<h2 class="StepTitle">Step 3 Content</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<div id="step-4">
|
|
<h2 class="StepTitle">Step 4 Content</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- End SmartWizard Content 1 -->
|
|
<br />
|
|
<h3>Wizard 2</h3>
|
|
|
|
<!-- Smart Wizard wizard2-->
|
|
<div id="wizard2" 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>
|
|
<ul type="disk">
|
|
<li>List 1</li>
|
|
<li>List 2</li>
|
|
</ul>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<div id="step-2">
|
|
<h2 class="StepTitle">Step 2 Content</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<div id="step-3">
|
|
<h2 class="StepTitle">Step 3 Content</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
<div id="step-4">
|
|
<h2 class="StepTitle">Step 4 Content</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- End SmartWizard Content 2 -->
|
|
|
|
</td></tr>
|
|
</table>
|
|
</body>
|
|
</html>
|