-
Notifications
You must be signed in to change notification settings - Fork 92
/
Copy pathform_wizard.html
211 lines (194 loc) · 10.7 KB
/
form_wizard.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 表单向导</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/plugins/steps/jquery.steps.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-5">
<div class="jumbotron">
<h1>表单向导</h1>
<p>Smart UI 部件允许您快速创建表单向导接口。</p>
<p><a href="../../../www.jquery-steps.com/GettingStarted" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
</p>
</div>
</div>
<div class="col-sm-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>基础表单向导</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>
这是一个简单的表单向导示例
</p>
<div id="wizard">
<h1>第一步</h1>
<div class="step-content">
<div class="text-center m-t-md">
<h2>第一步</h2>
<p>
这是第一步的内容
</p>
</div>
</div>
<h1>第二步</h1>
<div class="step-content">
<div class="text-center m-t-md">
<h2>第二步</h2>
<p>
这是第二步的内容
</p>
</div>
</div>
<h1>第三步</h1>
<div class="step-content">
<div class="text-center m-t-md">
<h2>第三步</h2>
<p>
这是第三步的内容
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox">
<div class="ibox-title">
<h5>带验证的表单向导</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<h2>
带验证的表单向导
</h2>
<p>
下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
</p>
<form id="form" action="#" class="wizard-big">
<h1>账户</h1>
<fieldset>
<h2>账户信息</h2>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>用户名 *</label>
<input id="userName" name="userName" type="text" class="form-control required">
</div>
<div class="form-group">
<label>密码 *</label>
<input id="password" name="password" type="text" class="form-control required">
</div>
<div class="form-group">
<label>确认密码 *</label>
<input id="confirm" name="confirm" type="text" class="form-control required">
</div>
</div>
<div class="col-sm-4">
<div class="text-center">
<div style="margin-top: 20px">
<i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
</div>
</div>
</div>
</div>
</fieldset>
<h1>个人资料</h1>
<fieldset>
<h2>个人资料信息</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>姓名 *</label>
<input id="name" name="name" type="text" class="form-control required">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Email *</label>
<input id="email" name="email" type="text" class="form-control required email">
</div>
<div class="form-group">
<label>地址 *</label>
<input id="address" name="address" type="text" class="form-control">
</div>
</div>
</div>
</fieldset>
<h1>警告</h1>
<fieldset>
<div class="text-center" style="margin-top: 120px">
<h2>你是火星人 :-)</h2>
</div>
</fieldset>
<h1>完成</h1>
<fieldset>
<h2>条款</h2>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
<label for="acceptTerms">我同意注册条款</label>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/content.min.js"></script>
<script src="js/plugins/staps/jquery.steps.min.js"></script>
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<script src="js/plugins/validate/messages_zh.min.js"></script>
<script>
$(document).ready(function(){$("#wizard").steps();$("#form").steps({bodyTag:"fieldset",onStepChanging:function(event,currentIndex,newIndex){if(currentIndex>newIndex){return true}if(newIndex===3&&Number($("#age").val())<18){return false}var form=$(this);if(currentIndex<newIndex){$(".body:eq("+newIndex+") label.error",form).remove();$(".body:eq("+newIndex+") .error",form).removeClass("error")}form.validate().settings.ignore=":disabled,:hidden";return form.valid()},onStepChanged:function(event,currentIndex,priorIndex){if(currentIndex===2&&Number($("#age").val())>=18){$(this).steps("next")}if(currentIndex===2&&priorIndex===3){$(this).steps("previous")}},onFinishing:function(event,currentIndex){var form=$(this);form.validate().settings.ignore=":disabled";return form.valid()},onFinished:function(event,currentIndex){var form=$(this);form.submit()}}).validate({errorPlacement:function(error,element){element.before(error)},rules:{confirm:{equalTo:"#password"}}})});
</script>
</body>
</html>