123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <!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 - Basic 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(){
- // Smart Wizard
- $('#wizard').smartWizard();
-
- function onFinishCallback(){
- $('#wizard').smartWizard('showMessage','Finish Clicked');
- //alert('Finish Clicked');
- }
- });
- </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 selected">Basic Example</a>
- <a href="smartwizard2-vertical.htm" class="btn">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>
- <!-- Smart Wizard -->
- <h2>Example: Basic Wizard</h2>
- <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>
- <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 -->
-
- </td></tr>
- </table>
-
- </body>
- </html>
|