third-party/smartwizard-1636c86/smartwizard2-multiple.htm

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   4 <title>Smart Wizard 2 - Multiple Wizard Example - a javascript jQuery wizard control plugin</title>
   5
   6 <link href="styles/smart_wizard.css" rel="stylesheet" type="text/css">
   7 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   8 <script type="text/javascript" src="js/jquery.smartWizard-2.0.min.js"></script>
   9
  10 <script type="text/javascript">
  11     $(document).ready(function(){
  12         //  Wizard 1
  13                 $('#wizard1').smartWizard({transitionEffect:'fade',onFinish:onFinishCallback});
  14         //  Wizard 2
  15       $('#wizard2').smartWizard({transitionEffect:'slide',onFinish:onFinishCallback});
  16       function onFinishCallback(){
  17         alert('Finish Called');
  18       }
  19                 });
  20 </script>
  21
  22 </head><body>
  23
  24 <table align="center" border="0" cellpadding="0" cellspacing="0">
  25 <tr><td>
  26 <h3>Wizard 1</h3>
  27 <!-- Smart Wizard wizard1-->
  28                 <div id="wizard1" class="swMain">
  29                         <ul>
  30                                 <li><a href="#step-1">
  31                 <span class="stepNumber">1</span>
  32                 <span class="stepDesc">
  33                    Step 1<br />
  34                    <small>Step 1 description</small>
  35                 </span>
  36             </a></li>
  37                                 <li><a href="#step-2">
  38                 <span class="stepNumber">2</span>
  39                 <span class="stepDesc">
  40                    Step 2<br />
  41                    <small>Step 2 description</small>
  42                 </span>
  43             </a></li>
  44                                 <li><a href="#step-3">
  45                 <span class="stepNumber">3</span>
  46                 <span class="stepDesc">
  47                    Step 3<br />
  48                    <small>Step 3 description</small>
  49                 </span>
  50              </a></li>
  51                                 <li><a href="#step-4">
  52                 <span class="stepNumber">4</span>
  53                 <span class="stepDesc">
  54                    Step 4<br />
  55                    <small>Step 4 description</small>
  56                 </span>
  57             </a></li>
  58                         </ul>
  59                         <div id="step-1">
  60             <h2 class="StepTitle">Step 1 Content</h2>
  61             <ul type="disk">
  62                                     <li>List 1</li>
  63                                     <li>List 2</li>
  64             </ul>
  65             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  66             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  67             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  68             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  69             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  70             </p>
  71             <p>
  72             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  73             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  74             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  75             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  76             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  77             </p>
  78             <p>
  79             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  80             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  81             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  82             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  83             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  84             </p>
  85         </div>
  86                         <div id="step-2">
  87             <h2 class="StepTitle">Step 2 Content</h2>
  88             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  89             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  90             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  91             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  92             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  93             </p>
  94             <p>
  95             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  96             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  97             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  98             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  99             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 100             </p>
 101             <p>
 102             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 103             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 104             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 105             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 106             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 107             </p>
 108             <p>
 109             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 110             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 111             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 112             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 113             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 114             </p>
 115         </div>
 116                         <div id="step-3">
 117             <h2 class="StepTitle">Step 3 Content</h2>
 118             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 119             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 120             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 121             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 122             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 123             </p>
 124             <p>
 125             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 126             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 127             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 128             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 129             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 130             </p>
 131         </div>
 132                         <div id="step-4">
 133             <h2 class="StepTitle">Step 4 Content</h2>
 134             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 135             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 136             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 137             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 138             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 139             </p>
 140             <p>
 141             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 142             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 143             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 144             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 145             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 146             </p>
 147             <p>
 148             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 149             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 150             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 151             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 152             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 153             </p>
 154         </div>
 155                 </div>
 156 <!-- End SmartWizard Content 1 -->
 157 <br />  &nbsp;
 158 <h3>Wizard 2</h3>
 159
 160 <!-- Smart Wizard wizard2-->
 161                 <div id="wizard2" class="swMain">
 162                         <ul>
 163                                 <li><a href="#step-1">
 164                 <span class="stepNumber">1</span>
 165                 <span class="stepDesc">
 166                    Step 1<br />
 167                    <small>Step 1 description</small>
 168                 </span>
 169             </a></li>
 170                                 <li><a href="#step-2">
 171                 <span class="stepNumber">2</span>
 172                 <span class="stepDesc">
 173                    Step 2<br />
 174                    <small>Step 2 description</small>
 175                 </span>
 176             </a></li>
 177                                 <li><a href="#step-3">
 178                 <span class="stepNumber">3</span>
 179                 <span class="stepDesc">
 180                    Step 3<br />
 181                    <small>Step 3 description</small>
 182                 </span>
 183              </a></li>
 184                                 <li><a href="#step-4">
 185                 <span class="stepNumber">4</span>
 186                 <span class="stepDesc">
 187                    Step 4<br />
 188                    <small>Step 4 description</small>
 189                 </span>
 190             </a></li>
 191                         </ul>
 192                         <div id="step-1">
 193             <h2 class="StepTitle">Step 1 Content</h2>
 194             <ul type="disk">
 195                                     <li>List 1</li>
 196                                     <li>List 2</li>
 197             </ul>
 198             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 199             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 200             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 201             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 202             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 203             </p>
 204             <p>
 205             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 206             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 207             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 208             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 209             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 210             </p>
 211             <p>
 212             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 213             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 214             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 215             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 216             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 217             </p>
 218         </div>
 219                         <div id="step-2">
 220             <h2 class="StepTitle">Step 2 Content</h2>
 221             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 222             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 223             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 224             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 225             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 226             </p>
 227             <p>
 228             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 229             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 230             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 231             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 232             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 233             </p>
 234             <p>
 235             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 236             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 237             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 238             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 239             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 240             </p>
 241             <p>
 242             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 243             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 244             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 245             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 246             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 247             </p>
 248         </div>
 249                         <div id="step-3">
 250             <h2 class="StepTitle">Step 3 Content</h2>
 251             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 252             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 253             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 254             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 255             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 256             </p>
 257             <p>
 258             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 259             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 260             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 261             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 262             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 263             </p>
 264         </div>
 265                         <div id="step-4">
 266             <h2 class="StepTitle">Step 4 Content</h2>
 267             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 268             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 269             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 270             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 271             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 272             </p>
 273             <p>
 274             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 275             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 276             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 277             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 278             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 279             </p>
 280             <p>
 281             Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 282             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 283             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 284             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 285             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 286             </p>
 287         </div>
 288                 </div>
 289 <!-- End SmartWizard Content 2 -->
 290
 291 </td></tr>
 292 </table>
 293 </body>
 294 </html>