mirror of https://github.com/ColorlibHQ/gentelella
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
11 KiB
197 lines
11 KiB
9 years ago
|
<!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 - Vertical Style Example - a javascript jQuery wizard control plugin</title>
|
||
|
|
<link href="styles/demo_style.css" rel="stylesheet" type="text/css">
|
||
|
|
|
||
|
|
<link href="styles/smart_wizard_vertical.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(){
|
||
|
|
// Smart Wizard
|
||
|
|
$('#wizard').smartWizard({transitionEffect:'slide'});
|
||
|
|
|
||
|
|
});
|
||
|
|
</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 selected">Vertical Style</a>
|
||
|
|
<a href="smartwizard2-multiple.htm" class="btn">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: Vertical Style</h2>
|
||
|
|
<!-- Tabs -->
|
||
|
|
<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 having some more text</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>
|
||
|
|
<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 -->
|
||
|
|
|
||
|
|
</td></tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|