wizard.html
14.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html>
<html lang="zh">
<head>
<th:block th:include="include :: header('表单向导')" />
<th:block th:include="include :: jquery-smartwizard-css" />
<style type="text/css">
/* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
.sw>.toolbar-bottom{
z-index: 100;
bottom: 0px;
left: 0;
width: 100%;
position: fixed;
text-align: right;
background: #fff;
box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
border-top: 1px solid #e3e4e8;
}
/* 如果设置了是否自动调节高度为false,需要加滚动条 */
.sw>.tab-content{
overflow-x: hidden;
overflow-y: auto;
}
/* 解决工具栏无法固定底部的问题（如果页面没有animated类可以不写这部分代码） */
.animated {
animation-fill-mode: none;
-webkit-animation-fill-mode: none;
-moz-animation-fill-mode: none;
-o-animation-fill-mode: none;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
<div class="row">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-title">
<h5>
表单向导
<small>https://github.com/techlab/jquery-smartwizard</small>
</h5>
</div>
<div class="ibox-content">
<div class="row select-list" style="padding-left: 15px; margin-bottom: 10px;">
<ul>
<li>
选择样式：
<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>
</li>
<!-- 快速操作栏按钮 -->
<li>
<div class="btn-group-sm" role="group">
<a class="btn btn-info" id="prev-btn"> 上一步 </a>
<a class="btn btn-success" id="next-btn"> 下一步 </a>
<a class="btn btn-danger" id="reset-btn"> 重置 </a>
</div>
</li>
</ul>
</div>
<div id="smartwizard">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#step-1"> 第一步 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-2"> 第二步 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-3"> 第三步 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-4"> 第四步 </a>
</li>
</ul>
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
<div>
<form class="form form-horizontal m-t">
<div class="form-group">
<label class="col-sm-3 control-label">姓氏：</label>
<div class="col-sm-8">
<input id="firstname" name="firstname" class="form-control" type="text">
<span class="help-block m-b-none">
<i class="fa fa-info-circle"></i>
这里写点提示的内容
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">名字：</label>
<div class="col-sm-8">
<input id="lastname" name="lastname" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">用户名：</label>
<div class="col-sm-8">
<input id="username" name="username" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码：</label>
<div class="col-sm-8">
<input id="password" name="password" class="form-control" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认密码：</label>
<div class="col-sm-8">
<input id="confirm_password" name="confirm_password" class="form-control" type="password">
<span class="help-block m-b-none">
<i class="fa fa-info-circle"></i>
请再次输入您的密码
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">E-mail：</label>
<div class="col-sm-8">
<input id="email" name="email" class="form-control" type="email">
</div>
</div>
</form>
</div>
</div>
<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
<div>
<form class="form form-horizontal m-t">
<div class="form-group">
<label class="col-sm-3 control-label">性别：</label>
<div class="col-sm-8">
<select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">时间：</label>
<div class="col-sm-8">
<input id="time" name="time" class="form-control time-input" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">状态：</label>
<div class="col-sm-8">
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
</div>
</div>
</div>
</form>
</div>
</div>
<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
<div class="m-t-md">
<p>1、如果不需要工具栏固定在页面底部, 将style中下面的部分取消注释<blockquote>.sw>.toolbar-bottom </blockquote></p>
<p>2、如果设置了自动调节高度(autoAdjustHeight)为true, 将style中下面的部分取消注释<blockquote>.sw>.tab-content </blockquote></p>
<p>3、工具栏的按钮样式会被表单插件中.btn样式覆盖导致bootstrap中的按钮样式无效, 如果需要改变按钮样式可以自己定义并提高优先级</blockquote></p>
</div>
</div>
<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
<div class="m-t-md">
<h3>测试多行显示</h3>
<pre style="overflow-x: hidden;">
$('#smartwizard').smartWizard({
selected: 0, // Initial selected step, 0 = first step
theme: 'default', // theme for the wizard, related css need to include for other than default theme
justified: true, // Nav menu justification. true/false
darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
autoAdjustHeight: true, // Automatically adjust content height
cycleSteps: false, // Allows to cycle the navigation of steps
backButtonSupport: true, // Enable the back button support
enableURLhash: true, // Enable selection of the step based on url hash
transition: {
animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
speed: '400', // Transition animation speed
easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
},
toolbarSettings: {
toolbarPosition: 'bottom', // none, top, bottom, both
toolbarButtonPosition: 'right', // left, right, center
showNextButton: true, // show/hide a Next button
showPreviousButton: true, // show/hide a Previous button
toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
},
anchorSettings: {
anchorClickable: true, // Enable/Disable anchor navigation
enableAllAnchors: false, // Activates all anchors clickable all times
markDoneStep: true, // Add done state on navigation
markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
},
keyboardSettings: {
keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
keyLeft: [37], // Left key code
keyRight: [39] // Right key code
},
lang: { // Language variables for button
next: 'Next',
previous: 'Previous'
},
disabledSteps: [], // Array Steps disabled
errorSteps: [], // Highlight step with errors
hiddenSteps: [] // Hidden steps
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-smartwizard-js" />
<script>
$(document).ready(function() {
// 工具栏按钮
var btnFinish = $('<a id="btn-finish"></a>').text('完成')
.addClass('btn btn-info')
.on('click', function(){ submit(); });
var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
.addClass('btn btn-danger')
.on('click', function(){ $('#smartwizard').smartWizard("reset"); });
// 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
var btnNext = $('<a id="btn-next"></a>').text('下一步')
.addClass('btn btn-info')
.on('click', function(){ $('#smartwizard').smartWizard("next");});
var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
.addClass('btn btn-success disabled')
.on('click', function(){ $('#smartwizard').smartWizard("prev"); });
// 初始化表单向导组件
$('#smartwizard').smartWizard({
theme: 'arrows', // default, arrows, dots, progress
autoAdjustHeight : false, // 自动调整高度, 默认true
enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
transition: {
animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
},
toolbarSettings: {
showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
toolbarExtraButtons: [btnCancel,btnPrev,btnNext,btnFinish]// 扩展的按钮集合
}
});
});
function submit(){
var data = {};
$('.form').each(function (index, form){
// 这里可以使用$.common.formToJSON(formId); 需要在form上加id
$.each($(form).serializeArray(), function(i, field) {
if(data[field.name]) {
data[field.name] += ("," + field.value);
} else {
data[field.name] = field.value;
}
});
});
alert(JSON.stringify(data))
}
// 显示步骤时将触发事件
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
// 下面按钮是快速操作栏的
$("#prev-btn").removeClass('disabled');
$("#next-btn").removeClass('disabled');
// 下面按钮是工具栏的
$("#btn-prev").removeClass('disabled');
$("#btn-next").removeClass('disabled');
$("#btn-finish").removeClass('disabled');
if(stepPosition === 'first') {
$("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
$("#btn-prev").addClass('disabled');
$("#btn-finish").addClass('disabled');
} else if(stepPosition === 'last') {
$("#next-btn").addClass('disabled');// 快速操作栏（演示用）
$("#btn-next").addClass('disabled');
} else {
$("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
$("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
$("#btn-prev").removeClass('disabled');
$("#btn-next").removeClass('disabled');
$("#btn-finish").addClass('disabled');
}
});
// 该事件在离开某个步骤之前触发
$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
if(stepDirection == 'forward'){
var form = $("#step-" + (currentStepNumber + 1)).find('.form');
if(form.length > 0){
return form.validate().form();
}
return true;
}
return true;
});
$("#theme-selector").on("change", function() {
// Change theme
var options = {
theme : $(this).val()
};
$('#smartwizard').smartWizard("setOptions", options);
return true;
});
$("#reset-btn").on("click", function() {
// Reset wizard
$('#smartwizard').smartWizard("reset");
return true;
});
$("#prev-btn").on("click", function() {
// Navigate previous
$('#smartwizard').smartWizard("prev");
return true;
});
$("#next-btn").on("click", function() {
// Navigate next
$('#smartwizard').smartWizard("next");
return true;
});
</script>
</body>
</html>