UNPKG

smartwizard/examples/multiple.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="is_justified" value="1" checked />
    <label for="is_justified">Justified</label>
35
    &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>
45
    &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>
54
    &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 />
62
63
  <!-- SmartWizard html -->
  <div id="smartwizard">
66
      <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#step-1">
              <strong>Step 1</strong> This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-2">
              <strong>Step 2</strong> This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-3">
              <strong>Step 3</strong> This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-4">
              <strong>Step 4</strong> This is step description
            </a>
          </li>
      </ul>
89
      <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 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 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>
109
  <br /> &nbsp;
111
  <p>
    <label>Theme:</label>
    <select id="theme_selector2">
      <option value="default">Default</option>
      <option value="arrows">Arrows</option>
      <option value="dots" selected>Dots</option>
      <option value="progress">Progress</option>
    </select>
120
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" id="is_justified2" value="1" checked />
    <label for="is_justified2">Justified</label>
124
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>Animation:</label>
    <select id="animation2">
          <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>
134
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>Go To:</label>
    <select id="got_to_step2">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
    </select>
143
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>External Buttons:</label>
    <button class="btn btn-secondary" id="prev-btn2" type="button">Go Previous</button>
    <button class="btn btn-secondary" id="next-btn2" type="button">Go Next</button>
    <button class="btn btn-danger" id="reset-btn2" type="button">Reset Wizard</button>
  </p>
  <br />
151
152
  <!-- SmartWizard html -->
  <div id="smartwizard2">
155
      <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#step-1">
              <strong>Step 1</strong> This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-2">
              <strong>Step 2</strong> This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-3">
              <strong>Step 3</strong> This is step description
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#step-4">
              <strong>Step 4</strong> This is step description
            </a>
          </li>
      </ul>
178
      <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 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 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>
198
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
201
  <!-- Include SmartWizard JavaScript source -->
  <script type="text/javascript" src="./js/jquery.smartWizard.min.js"></script>
204
  <script type="text/javascript">
      $(document).ready(function(){
207
          // 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"); });
215
          // Step show event
          $("#smartwizard #smartwizard2").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');
              }
          });
229
          // Smart Wizard
          $('#smartwizard').smartWizard({
              selected: 0,
              theme: 'arrows',
              transition: {
                  animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
              },
              toolbarSettings: {
                  toolbarPosition: 'both', // both bottom
                  toolbarExtraButtons: [btnFinish, btnCancel]
              }
          });
242
          // External Button Events
          $("#reset-btn").on("click", function() {
              // Reset wizard
              $('#smartwizard').smartWizard("reset");
              return true;
          });
249
          $("#prev-btn").on("click", function() {
              // Navigate previous
              $('#smartwizard').smartWizard("prev");
              return true;
          });
255
          $("#next-btn").on("click", function() {
              // Navigate next
              $('#smartwizard').smartWizard("next");
              return true;
          });
261
262
          // 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;
          });
270
          $("#is_justified").on("click", function() {
              // Change Justify
              var options = {
                justified: $(this).prop("checked")
              };
276
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
280
          $("#animation").on("change", function() {
              // Change theme
              var options = {
                transition: {
                    animation: $(this).val()
                },
              };
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
291
          $("#theme_selector").on("change", function() {
              // Change theme
              var options = {
                theme: $(this).val()
              };
              $('#smartwizard').smartWizard("setOptions", options);
              return true;
          });
300
          // Smart Wizard 2nd
          $('#smartwizard2').smartWizard({
              selected: 0,
              theme: 'dots',
              enableURLhash: false,
              transition: {
                  animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
              },
              toolbarSettings: {
                  toolbarPosition: 'both', // both bottom
                  toolbarExtraButtons: [btnFinish, btnCancel]
              }
          });
314
          // External Button Events
          $("#reset-btn2").on("click", function() {
              // Reset wizard
              $('#smartwizard2').smartWizard("reset");
              return true;
          });
321
          $("#prev-btn2").on("click", function() {
              // Navigate previous
              $('#smartwizard2').smartWizard("prev");
              return true;
          });
327
          $("#next-btn2").on("click", function() {
              // Navigate next
              $('#smartwizard2').smartWizard("next");
              return true;
          });
333
334
          // Demo Button Events
          $("#got_to_step2").on("change", function() {
              // Go to step
              var step_index = $(this).val() - 1;
              $('#smartwizard2').smartWizard("goToStep", step_index);
              return true;
          });
342
          $("#is_justified2").on("click", function() {
              // Change Justify
              var options = {
                justified: $(this).prop("checked")
              };
348
              $('#smartwizard2').smartWizard("setOptions", options);
              return true;
          });
352
          $("#animation2").on("change", function() {
              // Change theme
              var options = {
                transition: {
                    animation: $(this).val()
                },
              };
              $('#smartwizard2').smartWizard("setOptions", options);
              return true;
          });
363
          $("#theme_selector2").on("change", function() {
              // Change theme
              var options = {
                theme: $(this).val()
              };
              $('#smartwizard2').smartWizard("setOptions", options);
              return true;
          });
372
      });
  </script>
375</body>
376</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="is_justified" value="1" checked />`
34	`<label for="is_justified">Justified</label>`
35
36	`    `
37	`<label>Animation:</label>`
38	`<select id="animation">`
39	`<option value="none">None</option>`
40	`<option value="fade">Fade</option>`
41	`<option value="slide-horizontal" selected>Slide Horizontal</option>`
42	`<option value="slide-vertical">Slide Vertical</option>`
43	`<option value="slide-swing">Slide Swing</option>`
44	`</select>`
45
46	`    `
47	`<label>Go To:</label>`
48	`<select id="got_to_step">`
49	`<option value="1">1</option>`
50	`<option value="2">2</option>`
51	`<option value="3">3</option>`
52	`<option value="4">4</option>`
53	`</select>`
54
55	`    `
56	`<label>External Buttons:</label>`
57	`<button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>`
58	`<button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>`
59	`<button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>`
60	`</p>`
61	`<br />`
62
63
64	`<!-- SmartWizard html -->`
65	`<div id="smartwizard">`
66
67	`<ul class="nav">`
68	`<li class="nav-item">`
69	`<a class="nav-link" href="#step-1">`
70	`<strong>Step 1</strong> This is step description`
71	`</a>`
72	`</li>`
73	`<li class="nav-item">`
74	`<a class="nav-link" href="#step-2">`
75	`<strong>Step 2</strong> This is step description`
76	`</a>`
77	`</li>`
78	`<li class="nav-item">`
79	`<a class="nav-link" href="#step-3">`
80	`<strong>Step 3</strong> This is step description`
81	`</a>`
82	`</li>`
83	`<li class="nav-item">`
84	`<a class="nav-link" href="#step-4">`
85	`<strong>Step 4</strong> This is step description`
86	`</a>`
87	`</li>`
88	`</ul>`
89
90	`<div class="tab-content">`
91	`<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">`
92	`<h3>Step 1 Content</h3>`
93	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.
94	`</div>`
95	`<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">`
96	`<h3>Step 2 Content</h3>`
97	<div>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>
98	`</div>`
99	`<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">`
100	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.
101	`</div>`
102	`<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">`
103	`<h3>Step 4 Content</h3>`
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	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.
106	`</div>`
107	`</div>`
108	`</div>`
109
110	`<br />  `
111
112	`<p>`
113	`<label>Theme:</label>`
114	`<select id="theme_selector2">`
115	`<option value="default">Default</option>`
116	`<option value="arrows">Arrows</option>`
117	`<option value="dots" selected>Dots</option>`
118	`<option value="progress">Progress</option>`
119	`</select>`
120
121	`    `
122	`<input type="checkbox" id="is_justified2" value="1" checked />`
123	`<label for="is_justified2">Justified</label>`
124
125	`    `
126	`<label>Animation:</label>`
127	`<select id="animation2">`
128	`<option value="none">None</option>`
129	`<option value="fade">Fade</option>`
130	`<option value="slide-horizontal" selected>Slide Horizontal</option>`
131	`<option value="slide-vertical">Slide Vertical</option>`
132	`<option value="slide-swing">Slide Swing</option>`
133	`</select>`
134
135	`    `
136	`<label>Go To:</label>`
137	`<select id="got_to_step2">`
138	`<option value="1">1</option>`
139	`<option value="2">2</option>`
140	`<option value="3">3</option>`
141	`<option value="4">4</option>`
142	`</select>`
143
144	`    `
145	`<label>External Buttons:</label>`
146	`<button class="btn btn-secondary" id="prev-btn2" type="button">Go Previous</button>`
147	`<button class="btn btn-secondary" id="next-btn2" type="button">Go Next</button>`
148	`<button class="btn btn-danger" id="reset-btn2" type="button">Reset Wizard</button>`
149	`</p>`
150	`<br />`
151
152
153	`<!-- SmartWizard html -->`
154	`<div id="smartwizard2">`
155
156	`<ul class="nav">`
157	`<li class="nav-item">`
158	`<a class="nav-link" href="#step-1">`
159	`<strong>Step 1</strong> This is step description`
160	`</a>`
161	`</li>`
162	`<li class="nav-item">`
163	`<a class="nav-link" href="#step-2">`
164	`<strong>Step 2</strong> This is step description`
165	`</a>`
166	`</li>`
167	`<li class="nav-item">`
168	`<a class="nav-link" href="#step-3">`
169	`<strong>Step 3</strong> This is step description`
170	`</a>`
171	`</li>`
172	`<li class="nav-item">`
173	`<a class="nav-link" href="#step-4">`
174	`<strong>Step 4</strong> This is step description`
175	`</a>`
176	`</li>`
177	`</ul>`
178
179	`<div class="tab-content">`
180	`<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">`
181	`<h3>Step 1 Content</h3>`
182	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.
183	`</div>`
184	`<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">`
185	`<h3>Step 2 Content</h3>`
186	<div>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>
187	`</div>`
188	`<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">`
189	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.
190	`</div>`
191	`<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">`
192	`<h3>Step 4 Content</h3>`
193	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.
194	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.
195	`</div>`
196	`</div>`
197	`</div>`
198
199	`<!-- Include jQuery -->`
200	`<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>`
201
202	`<!-- Include SmartWizard JavaScript source -->`
203	`<script type="text/javascript" src="./js/jquery.smartWizard.min.js"></script>`
204
205	`<script type="text/javascript">`
206	`$(document).ready(function(){`
207
208	`// Toolbar extra buttons`
209	`var btnFinish = $('<button></button>').text('Finish')`
210	`.addClass('btn btn-info')`
211	`.on('click', function(){ alert('Finish Clicked'); });`
212	`var btnCancel = $('<button></button>').text('Cancel')`
213	`.addClass('btn btn-danger')`
214	`.on('click', function(){ $('#smartwizard').smartWizard("reset"); });`
215
216	`// Step show event`
217	`$("#smartwizard #smartwizard2").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {`
218	`$("#prev-btn").removeClass('disabled');`
219	`$("#next-btn").removeClass('disabled');`
220	`if(stepPosition === 'first') {`
221	`$("#prev-btn").addClass('disabled');`
222	`} else if(stepPosition === 'last') {`
223	`$("#next-btn").addClass('disabled');`
224	`} else {`
225	`$("#prev-btn").removeClass('disabled');`
226	`$("#next-btn").removeClass('disabled');`
227	`}`
228	`});`
229
230	`// Smart Wizard`
231	`$('#smartwizard').smartWizard({`
232	`selected: 0,`
233	`theme: 'arrows',`
234	`transition: {`
235	`animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing`
236	`},`
237	`toolbarSettings: {`
238	`toolbarPosition: 'both', // both bottom`
239	`toolbarExtraButtons: [btnFinish, btnCancel]`
240	`}`
241	`});`
242
243	`// External Button Events`
244	`$("#reset-btn").on("click", function() {`
245	`// Reset wizard`
246	`$('#smartwizard').smartWizard("reset");`
247	`return true;`
248	`});`
249
250	`$("#prev-btn").on("click", function() {`
251	`// Navigate previous`
252	`$('#smartwizard').smartWizard("prev");`
253	`return true;`
254	`});`
255
256	`$("#next-btn").on("click", function() {`
257	`// Navigate next`
258	`$('#smartwizard').smartWizard("next");`
259	`return true;`
260	`});`
261
262
263	`// Demo Button Events`
264	`$("#got_to_step").on("change", function() {`
265	`// Go to step`
266	`var step_index = $(this).val() - 1;`
267	`$('#smartwizard').smartWizard("goToStep", step_index);`
268	`return true;`
269	`});`
270
271	`$("#is_justified").on("click", function() {`
272	`// Change Justify`
273	`var options = {`
274	`justified: $(this).prop("checked")`
275	`};`
276
277	`$('#smartwizard').smartWizard("setOptions", options);`
278	`return true;`
279	`});`
280
281	`$("#animation").on("change", function() {`
282	`// Change theme`
283	`var options = {`
284	`transition: {`
285	`animation: $(this).val()`
286	`},`
287	`};`
288	`$('#smartwizard').smartWizard("setOptions", options);`
289	`return true;`
290	`});`
291
292	`$("#theme_selector").on("change", function() {`
293	`// Change theme`
294	`var options = {`
295	`theme: $(this).val()`
296	`};`
297	`$('#smartwizard').smartWizard("setOptions", options);`
298	`return true;`
299	`});`
300
301	`// Smart Wizard 2nd`
302	`$('#smartwizard2').smartWizard({`
303	`selected: 0,`
304	`theme: 'dots',`
305	`enableURLhash: false,`
306	`transition: {`
307	`animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing`
308	`},`
309	`toolbarSettings: {`
310	`toolbarPosition: 'both', // both bottom`
311	`toolbarExtraButtons: [btnFinish, btnCancel]`
312	`}`
313	`});`
314
315	`// External Button Events`
316	`$("#reset-btn2").on("click", function() {`
317	`// Reset wizard`
318	`$('#smartwizard2').smartWizard("reset");`
319	`return true;`
320	`});`
321
322	`$("#prev-btn2").on("click", function() {`
323	`// Navigate previous`
324	`$('#smartwizard2').smartWizard("prev");`
325	`return true;`
326	`});`
327
328	`$("#next-btn2").on("click", function() {`
329	`// Navigate next`
330	`$('#smartwizard2').smartWizard("next");`
331	`return true;`
332	`});`
333
334
335	`// Demo Button Events`
336	`$("#got_to_step2").on("change", function() {`
337	`// Go to step`
338	`var step_index = $(this).val() - 1;`
339	`$('#smartwizard2').smartWizard("goToStep", step_index);`
340	`return true;`
341	`});`
342
343	`$("#is_justified2").on("click", function() {`
344	`// Change Justify`
345	`var options = {`
346	`justified: $(this).prop("checked")`
347	`};`
348
349	`$('#smartwizard2').smartWizard("setOptions", options);`
350	`return true;`
351	`});`
352
353	`$("#animation2").on("change", function() {`
354	`// Change theme`
355	`var options = {`
356	`transition: {`
357	`animation: $(this).val()`
358	`},`
359	`};`
360	`$('#smartwizard2').smartWizard("setOptions", options);`
361	`return true;`
362	`});`
363
364	`$("#theme_selector2").on("change", function() {`
365	`// Change theme`
366	`var options = {`
367	`theme: $(this).val()`
368	`};`
369	`$('#smartwizard2').smartWizard("setOptions", options);`
370	`return true;`
371	`});`
372
373	`});`
374	`</script>`
375	`</body>`
376	`</html>`