UNPKG

smartwizard/examples/index.html

Version:

1<!doctype html>
2<html lang="en">
3<head>
  <title>jQuery Smart Wizard - The awesome jQuery step wizard plugin</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
  <!-- Include SmartWizard CSS -->
  <link href="./css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
10
  <!-- Demo Page Style - You don't need -->
  <style>
  body {
    padding-right: 5%;
    padding-left: 5%;
  }
  </style>
18
19</head>
20<body>
21
  <br />
  <p>
    <label>Theme:</label>
    <select id="theme_selector">
      <option value="default">Default</option>
      <option value="arrows" selected>Arrows</option>
      <option value="dots">Dots</option>
      <option value="progress">Progress</option>
    </select>
31
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" id="dark_mode" value="1" />
    <label for="dark_mode">Dark Mode</label>
35
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" id="is_justified" value="1" checked />
    <label for="is_justified">Justified</label>
39
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>Animation:</label>
    <select id="animation">
          <option value="none">None</option>
          <option value="fade">Fade</option>
          <option value="slide-horizontal" selected>Slide Horizontal</option>
          <option value="slide-vertical">Slide Vertical</option>
          <option value="slide-swing">Slide Swing</option>
    </select>
49
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>Go To:</label>
    <select id="got_to_step">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
    </select>
58
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>External Buttons:</label>
    <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
    <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
    <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
  </p>
  <br />
66
67
  <!-- SmartWizard html -->
  <div id="smartwizard">
70
      <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#step-1">
              <strong>Step 1</strong> <br>This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-2">
              <strong>Step 2</strong> <br>This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-3">
              <strong>Step 3</strong> <br>This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#step-4">
              <strong>Step 4</strong> <br>This is step description
            </a>
          </li>
      </ul>
93
      <div class="tab-content">
          <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
              <h3>Step 1 Content</h3>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>
          <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
              <h3>Step 2 Content</h3>
              <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
          </div>
          <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>
          <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
              <h3>Step 4 Content</h3>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>
      </div>
  </div>
113
  <br /> &nbsp;
115
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
118
  <!-- Include SmartWizard JavaScript source -->
  <script type="text/javascript" src="./js/jquery.smartWizard.min.js"></script>
121
  <script type="text/javascript">
      $(document).ready(function(){
124
          // Toolbar extra buttons
          var btnFinish = $('<button></button>').text('Finish')
                                           .addClass('btn btn-info')
                                           .on('click', function(){ alert('Finish Clicked'); });
          var btnCancel = $('<button></button>').text('Cancel')
                                           .addClass('btn btn-danger')
                                           .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
132
          // Step show event
          $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
              $("#prev-btn").removeClass('disabled');
              $("#next-btn").removeClass('disabled');
              if(stepPosition === 'first') {
                  $("#prev-btn").addClass('disabled');
              } else if(stepPosition === 'last') {
                  $("#next-btn").addClass('disabled');
              } else {
                  $("#prev-btn").removeClass('disabled');
                  $("#next-btn").removeClass('disabled');
              }
          });
146
          // Smart Wizard
          $('#smartwizard').smartWizard({
              selected: 0,
              theme: 'arrows', // default, arrows, dots, progress
              // darkMode: true,
              transition: {
                  animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
              },
              toolbarSettings: {
                  toolbarPosition: 'both', // both bottom
                  toolbarExtraButtons: [btnFinish, btnCancel]
              }
          });
160
          // External Button Events
          $("#reset-btn").on("click", function() {
              // Reset wizard
              $('#smartwizard').smartWizard("reset");
              return true;
          });
167
          $("#prev-btn").on("click", function() {
              // Navigate previous
              $('#smartwizard').smartWizard("prev");
              return true;
          });
173
          $("#next-btn").on("click", function() {
              // Navigate next
              $('#smartwizard').smartWizard("next");
              return true;
          });
179
180
          // Demo Button Events
          $("#got_to_step").on("change", function() {
              // Go to step
              var step_index = $(this).val() - 1;
              $('#smartwizard').smartWizard("goToStep", step_index);
              return true;
          });
188
189
          $("#dark_mode").on("click", function() {
              // Change dark mode
              var options = {
                darkMode: $(this).prop("checked")
              };
195
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
199
          $("#is_justified").on("click", function() {
              // Change Justify
              var options = {
                justified: $(this).prop("checked")
              };
205
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
209
          $("#animation").on("change", function() {
              // Change theme
              var options = {
                transition: {
                    animation: $(this).val()
                },
              };
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
220
          $("#theme_selector").on("change", function() {
              // Change theme
              var options = {
                theme: $(this).val()
              };
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
229
      });
  </script>
232</body>
233</html>

1	`<!doctype html>`
2	`<html lang="en">`
3	`<head>`
4	`<title>jQuery Smart Wizard - The awesome jQuery step wizard plugin</title>`
5	`<meta charset="UTF-8">`
6	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">`
7
8	`<!-- Include SmartWizard CSS -->`
9	`<link href="./css/smart_wizard_all.css" rel="stylesheet" type="text/css" />`
10
11	`<!-- Demo Page Style - You don't need -->`
12	`<style>`
13	`body {`
14	`padding-right: 5%;`
15	`padding-left: 5%;`
16	`}`
17	`</style>`
18
19	`</head>`
20	`<body>`
21
22	`<br />`
23	`<p>`
24	`<label>Theme:</label>`
25	`<select id="theme_selector">`
26	`<option value="default">Default</option>`
27	`<option value="arrows" selected>Arrows</option>`
28	`<option value="dots">Dots</option>`
29	`<option value="progress">Progress</option>`
30	`</select>`
31
32	`    `
33	`<input type="checkbox" id="dark_mode" value="1" />`
34	`<label for="dark_mode">Dark Mode</label>`
35
36	`    `
37	`<input type="checkbox" id="is_justified" value="1" checked />`
38	`<label for="is_justified">Justified</label>`
39
40	`    `
41	`<label>Animation:</label>`
42	`<select id="animation">`
43	`<option value="none">None</option>`
44	`<option value="fade">Fade</option>`
45	`<option value="slide-horizontal" selected>Slide Horizontal</option>`
46	`<option value="slide-vertical">Slide Vertical</option>`
47	`<option value="slide-swing">Slide Swing</option>`
48	`</select>`
49
50	`    `
51	`<label>Go To:</label>`
52	`<select id="got_to_step">`
53	`<option value="1">1</option>`
54	`<option value="2">2</option>`
55	`<option value="3">3</option>`
56	`<option value="4">4</option>`
57	`</select>`
58
59	`    `
60	`<label>External Buttons:</label>`
61	`<button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>`
62	`<button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>`
63	`<button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>`
64	`</p>`
65	`<br />`
66
67
68	`<!-- SmartWizard html -->`
69	`<div id="smartwizard">`
70
71	`<ul class="nav">`
72	`<li class="nav-item">`
73	`<a class="nav-link" href="#step-1">`
74	`<strong>Step 1</strong> <br>This is step description`
75	`</a>`
76	`</li>`
77	`<li class="nav-item">`
78	`<a class="nav-link" href="#step-2">`
79	`<strong>Step 2</strong> <br>This is step description`
80	`</a>`
81	`</li>`
82	`<li class="nav-item">`
83	`<a class="nav-link" href="#step-3">`
84	`<strong>Step 3</strong> <br>This is step description`
85	`</a>`
86	`</li>`
87	`<li class="nav-item">`
88	`<a class="nav-link " href="#step-4">`
89	`<strong>Step 4</strong> <br>This is step description`
90	`</a>`
91	`</li>`
92	`</ul>`
93
94	`<div class="tab-content">`
95	`<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">`
96	`<h3>Step 1 Content</h3>`
97	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
98	`</div>`
99	`<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">`
100	`<h3>Step 2 Content</h3>`
101	<div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
102	`</div>`
103	`<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">`
104	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
105	`</div>`
106	`<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">`
107	`<h3>Step 4 Content</h3>`
108	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
109	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
110	`</div>`
111	`</div>`
112	`</div>`
113
114	`<br />  `
115
116	`<!-- Include jQuery -->`
117	`<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>`
118
119	`<!-- Include SmartWizard JavaScript source -->`
120	`<script type="text/javascript" src="./js/jquery.smartWizard.min.js"></script>`
121
122	`<script type="text/javascript">`
123	`$(document).ready(function(){`
124
125	`// Toolbar extra buttons`
126	`var btnFinish = $('<button></button>').text('Finish')`
127	`.addClass('btn btn-info')`
128	`.on('click', function(){ alert('Finish Clicked'); });`
129	`var btnCancel = $('<button></button>').text('Cancel')`
130	`.addClass('btn btn-danger')`
131	`.on('click', function(){ $('#smartwizard').smartWizard("reset"); });`
132
133	`// Step show event`
134	`$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {`
135	`$("#prev-btn").removeClass('disabled');`
136	`$("#next-btn").removeClass('disabled');`
137	`if(stepPosition === 'first') {`
138	`$("#prev-btn").addClass('disabled');`
139	`} else if(stepPosition === 'last') {`
140	`$("#next-btn").addClass('disabled');`
141	`} else {`
142	`$("#prev-btn").removeClass('disabled');`
143	`$("#next-btn").removeClass('disabled');`
144	`}`
145	`});`
146
147	`// Smart Wizard`
148	`$('#smartwizard').smartWizard({`
149	`selected: 0,`
150	`theme: 'arrows', // default, arrows, dots, progress`
151	`// darkMode: true,`
152	`transition: {`
153	`animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing`
154	`},`
155	`toolbarSettings: {`
156	`toolbarPosition: 'both', // both bottom`
157	`toolbarExtraButtons: [btnFinish, btnCancel]`
158	`}`
159	`});`
160
161	`// External Button Events`
162	`$("#reset-btn").on("click", function() {`
163	`// Reset wizard`
164	`$('#smartwizard').smartWizard("reset");`
165	`return true;`
166	`});`
167
168	`$("#prev-btn").on("click", function() {`
169	`// Navigate previous`
170	`$('#smartwizard').smartWizard("prev");`
171	`return true;`
172	`});`
173
174	`$("#next-btn").on("click", function() {`
175	`// Navigate next`
176	`$('#smartwizard').smartWizard("next");`
177	`return true;`
178	`});`
179
180
181	`// Demo Button Events`
182	`$("#got_to_step").on("change", function() {`
183	`// Go to step`
184	`var step_index = $(this).val() - 1;`
185	`$('#smartwizard').smartWizard("goToStep", step_index);`
186	`return true;`
187	`});`
188
189
190	`$("#dark_mode").on("click", function() {`
191	`// Change dark mode`
192	`var options = {`
193	`darkMode: $(this).prop("checked")`
194	`};`
195
196	`$('#smartwizard').smartWizard("setOptions", options);`
197	`return true;`
198	`});`
199
200	`$("#is_justified").on("click", function() {`
201	`// Change Justify`
202	`var options = {`
203	`justified: $(this).prop("checked")`
204	`};`
205
206	`$('#smartwizard').smartWizard("setOptions", options);`
207	`return true;`
208	`});`
209
210	`$("#animation").on("change", function() {`
211	`// Change theme`
212	`var options = {`
213	`transition: {`
214	`animation: $(this).val()`
215	`},`
216	`};`
217	`$('#smartwizard').smartWizard("setOptions", options);`
218	`return true;`
219	`});`
220
221	`$("#theme_selector").on("change", function() {`
222	`// Change theme`
223	`var options = {`
224	`theme: $(this).val()`
225	`};`
226	`$('#smartwizard').smartWizard("setOptions", options);`
227	`return true;`
228	`});`
229
230	`});`
231	`</script>`
232	`</body>`
233	`</html>`