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 |
|
9 | <link href="./css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
|
10 |
|
11 |
|
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" selected>Default</option>
|
27 | <option value="arrows">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 | </select>
|
53 |
|
54 |
|
55 | <label>External Buttons:</label>
|
56 | <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
|
57 | <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
|
58 | <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
|
59 | </p>
|
60 | <br />
|
61 |
|
62 |
|
63 |
|
64 | <div id="smartwizard">
|
65 |
|
66 | <ul class="nav">
|
67 | <li class="nav-item">
|
68 | <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
|
69 | <strong>SmartTab</strong><br />repository details from GitHub
|
70 | </a>
|
71 | </li>
|
72 | <li class="nav-item">
|
73 | <a class="nav-link" href="#step-2" data-repo="smartwizard">
|
74 | <strong>SmartWizard</strong><br />repository details from GitHub
|
75 | </a>
|
76 | </li>
|
77 | <li class="nav-item">
|
78 | <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
|
79 | <strong>SmartCart</strong><br />repository details from GitHub
|
80 | </a>
|
81 | </li>
|
82 | </ul>
|
83 |
|
84 | <div class="tab-content">
|
85 | <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
|
86 | </div>
|
87 | <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
|
88 | </div>
|
89 | <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
|
90 | </div>
|
91 | <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
|
92 | </div>
|
93 | </div>
|
94 | </div>
|
95 |
|
96 | <br />
|
97 |
|
98 |
|
99 | <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
|
100 |
|
101 |
|
102 | <script type="text/javascript" src="./js/jquery.smartWizard.min.js"></script>
|
103 |
|
104 | <script type="text/javascript">
|
105 | $(document).ready(function(){
|
106 |
|
107 |
|
108 | var btnFinish = $('<button></button>').text('Finish')
|
109 | .addClass('btn btn-info')
|
110 | .on('click', function(){ alert('Finish Clicked'); });
|
111 | var btnCancel = $('<button></button>').text('Cancel')
|
112 | .addClass('btn btn-danger')
|
113 | .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
|
114 |
|
115 |
|
116 | $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
|
117 | $("#prev-btn").removeClass('disabled');
|
118 | $("#next-btn").removeClass('disabled');
|
119 | if(stepPosition === 'first') {
|
120 | $("#prev-btn").addClass('disabled');
|
121 | } else if(stepPosition === 'last') {
|
122 | $("#next-btn").addClass('disabled');
|
123 | } else {
|
124 | $("#prev-btn").removeClass('disabled');
|
125 | $("#next-btn").removeClass('disabled');
|
126 | }
|
127 | });
|
128 |
|
129 | $("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
|
130 |
|
131 | var repo = anchorObject.data('repo');
|
132 | var ajaxURL = "https://api.npms.io/v2/package/" + repo;
|
133 |
|
134 | return new Promise((resolve, reject) => {
|
135 |
|
136 |
|
137 | $.ajax({
|
138 | method : "GET",
|
139 | url : ajaxURL,
|
140 | beforeSend: function( xhr ) {
|
141 |
|
142 | $('#smartwizard').smartWizard("loader", "show");
|
143 | }
|
144 | }).done(function( res ) {
|
145 |
|
146 |
|
147 | var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
|
148 | html += '<br>URL: <strong>' + ajaxURL + '</strong>';
|
149 | html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
|
150 | html += '<br>Description: ' + res.collected.metadata.description;
|
151 | html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
|
152 | html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');
|
153 |
|
154 |
|
155 | html += '<br>Stars: ' + res.collected.github.starsCount;
|
156 | html += '<br>Forks: ' + res.collected.github.forksCount;
|
157 | html += '<br>Watchers: ' + res.collected.github.subscribersCount;
|
158 | html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;
|
159 |
|
160 | html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
|
161 | html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
|
162 | html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);
|
163 |
|
164 |
|
165 | resolve(html);
|
166 |
|
167 |
|
168 | $('#smartwizard').smartWizard("loader", "hide");
|
169 | }).fail(function(err) {
|
170 |
|
171 |
|
172 | reject( "An error loading the resource" );
|
173 |
|
174 |
|
175 | $('#smartwizard').smartWizard("loader", "hide");
|
176 | });
|
177 |
|
178 | });
|
179 | });
|
180 |
|
181 |
|
182 | $('#smartwizard').smartWizard({
|
183 | selected: 0,
|
184 | transition: {
|
185 | animation: 'slide-horizontal',
|
186 | },
|
187 | toolbarSettings: {
|
188 | toolbarPosition: 'both',
|
189 | toolbarExtraButtons: [btnFinish, btnCancel]
|
190 | }
|
191 | });
|
192 |
|
193 |
|
194 | $("#reset-btn").on("click", function() {
|
195 |
|
196 | $('#smartwizard').smartWizard("reset");
|
197 | return true;
|
198 | });
|
199 |
|
200 | $("#prev-btn").on("click", function() {
|
201 |
|
202 | $('#smartwizard').smartWizard("prev");
|
203 | return true;
|
204 | });
|
205 |
|
206 | $("#next-btn").on("click", function() {
|
207 |
|
208 | $('#smartwizard').smartWizard("next");
|
209 | return true;
|
210 | });
|
211 |
|
212 |
|
213 |
|
214 | $("#got_to_step").on("change", function() {
|
215 |
|
216 | var step_index = $(this).val() - 1;
|
217 | $('#smartwizard').smartWizard("goToStep", step_index);
|
218 | return true;
|
219 | });
|
220 |
|
221 | $("#is_justified").on("click", function() {
|
222 |
|
223 | var options = {
|
224 | justified: $(this).prop("checked")
|
225 | };
|
226 |
|
227 | $('#smartwizard').smartWizard("setOptions", options);
|
228 | return true;
|
229 | });
|
230 |
|
231 | $("#animation").on("change", function() {
|
232 |
|
233 | var options = {
|
234 | transition: {
|
235 | animation: $(this).val()
|
236 | },
|
237 | };
|
238 | $('#smartwizard').smartWizard("setOptions", options);
|
239 | return true;
|
240 | });
|
241 |
|
242 | $("#theme_selector").on("change", function() {
|
243 |
|
244 | var options = {
|
245 | theme: $(this).val()
|
246 | };
|
247 | $('#smartwizard').smartWizard("setOptions", options);
|
248 | return true;
|
249 | });
|
250 |
|
251 | });
|
252 | </script>
|
253 | </body>
|
254 | </html>
|