| 1 | <!doctype html> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Wizard - Overview</title> |
|---|
| 5 | <meta charset="utf-8" /> |
|---|
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|---|
| 7 | <meta name="description" content="Overview" /> |
|---|
| 8 | <meta name="keywords" content="" /> |
|---|
| 9 | <meta name="author" content="ComponentOne" /> |
|---|
| 10 | <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" /> |
|---|
| 11 | <link href="../../themes/wijmo/jquery.wijmo-open.2.2.2.css" rel="stylesheet" type="text/css" /> |
|---|
| 12 | <link href="../../themes/wijmo/jquery.wijmo.wijwizard.css" rel="stylesheet" type="text/css" /> |
|---|
| 13 | <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script> |
|---|
| 14 | <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script> |
|---|
| 15 | <script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script> |
|---|
| 16 | <script src="../../wijmo/jquery.wijmo.wijwizard.js" type="text/javascript"></script> |
|---|
| 17 | <script id="scriptInit" type="text/javascript"> |
|---|
| 18 | $(document).ready(function () { |
|---|
| 19 | $("#pages").wijwizard({ |
|---|
| 20 | add: function (e, ui) { |
|---|
| 21 | $(ui.panel).html("Content of newly added panel"); |
|---|
| 22 | } |
|---|
| 23 | }); |
|---|
| 24 | $("#pages").wijwizard("add", 1, "Step 2", "This panel has been added"); |
|---|
| 25 | }); |
|---|
| 26 | </script> |
|---|
| 27 | </head> |
|---|
| 28 | <body class="demo-single"> |
|---|
| 29 | <div class="container"> |
|---|
| 30 | <div class="header"> |
|---|
| 31 | <h2> |
|---|
| 32 | Overview</h2> |
|---|
| 33 | </div> |
|---|
| 34 | <div class="main demo"> |
|---|
| 35 | <div id="pages"> |
|---|
| 36 | <ul> |
|---|
| 37 | <li> |
|---|
| 38 | <h1> |
|---|
| 39 | Step 1</h1> |
|---|
| 40 | This is the first step</li> |
|---|
| 41 | </ul> |
|---|
| 42 | <div> |
|---|
| 43 | <p> |
|---|
| 44 | Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> |
|---|
| 45 | </div> |
|---|
| 46 | </div> |
|---|
| 47 | <!-- End demo markup --> |
|---|
| 48 | <div class="demo-options"> |
|---|
| 49 | <!-- Begin options markup --> |
|---|
| 50 | <!-- End options markup --> |
|---|
| 51 | </div> |
|---|
| 52 | </div> |
|---|
| 53 | <div class="footer demo-description"> |
|---|
| 54 | <p> |
|---|
| 55 | The Wijmo Wizard widget (wijwizard) is used to display sections of content on separate, navigable pages so you can save screen real estate or simplify input tasks by creating a series of forms. For easy navigation, you can use wijwizard's built-in navigation buttons or its autoplay feature. And if you'd like to add extra flair to the wijwizard, you can combine it with the wijpager widget for paged navigation. |
|---|
| 56 | </p> |
|---|
| 57 | <p> |
|---|
| 58 | The samples in this section will help get you started with the wijwizard widget. |
|---|
| 59 | </p> |
|---|
| 60 | </div> |
|---|
| 61 | </div> |
|---|
| 62 | </body> |
|---|
| 63 | </html> |
|---|
