-
Notifications
You must be signed in to change notification settings - Fork 167
/
dialog.jade
435 lines (392 loc) · 21 KB
/
dialog.jade
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
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
// vim: tabstop=2 shiftwidth=2 softtabstop=2
extends _base
block title
title 对话框
block sidebar
+sidebar('dialog')
block content
h2.sui-page-header 设计规范
div.docs-description
img(src='pictures/docs/popover.png')
ul.demo-operations.clearfix
li
a(href='#') 下载psd文件
h2.sui-page-header 开发者文档
p.sui-lead
| 对话框分为独占式和非独占式两种。<br />
| 注意href属性可用来指向对话框主体元素,不再能引用远程内容url<br>
| 文档写的渣，有任何疑惑可以联系@半边。
ul.unstyled
li
strong 更新 v1.1.3：增加了cancelHide/cancelHidden接口，增加了高度控制，增加了对绝对定位元素导致滚动条的说明。
li
strong 更新 v1.2.2：加载远程内容的时候不再加载 <code>href</code>属性指定的地址，只能通过 <code>remote</code> 参数或者 <code>data-remote</code> 属性来指定。
li
strong 更新 v1.4.3：增加了closeBtn, transition 2个布尔值配置项，决定是否显示右上角叉叉和是否动画显示、隐藏（html使用方式直接改html结构即可）.
h2 概览
pre.prettyprint.linenums
原型方法 $ele需要事先写到html中
$ele.modal(options | 'toggle' | 'show' | 'hide') // $ele是对话框元素，不是触发元素
静态方法
$.alert('this is typical alert')
$.alert(options)
$.confirm('this is typical confirm')
$.confirm(options)
h2 1. 不写js初始化对话框,原型方法控制。用于复杂结构对话框。
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo1', data-toggle='tab') 示例
li
a(href='#code1', data-toggle='tab') 代码
li
a(href='#doc1', data-toggle='tab') 文档
li
a(href='#api1', data-toggle='tab') API
li
a(href='#event1', data-toggle='tab') 事件
div.tab-content
div.tab-pane.active#demo1
div.bs-docs-example
button.sui-btn.btn-primary.btn-lg(data-toggle="modal", data-target="#myModal", data-keyboard="false") 对话框已写入html
// Modal
div.sui-modal.hide.fade#myModal(tabindex='-1', role='dialog', data-hasfoot='false')
div.modal-dialog
div.modal-content
div.modal-header
button.sui-close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title#myModalLabel Modal title
div.modal-body 我是内容body
div.modal-footer
button.sui-btn.btn-primary.btn-large(type='button', data-ok='modal') 可自定ok
button.sui-btn.btn-default.btn-large(type='button', data-dismiss='modal') 可自定dismiss
script.
$('#myModal').on('okHide', function(e){console.log('okHide')})
$('#myModal').on('okHidden', function(e){console.log('okHidden')})
$('#myModal').on('cancelHide', function(e){console.log('cancelHide')})
$('#myModal').on('cancelHidden', function(e){console.log('cancelHidden')})
div.tab-pane#code1
pre.prettyprint.linenums(data-target='#demo1>div')
div.tab-pane#doc1
pre.prettyprint $ele.modal(opstions) 让指定的内容变成一个模态对话框。接受一个可选的参数
pre.prettyprint $ele.modal('show') 手动打开一个模态对话框。
pre.prettyprint $ele.modal('hide') 手动关闭一个模态对话框。
pre.prettyprint $ele.modal('okHide') 手动关闭一个模态对话框，此时不会再触发okHide事件回调，而是在对话框关闭后会触发okHidden事件。
pre.prettyprint $ele.modal('toggle') 手动打开或关闭一个模态对话框。
pre.prettyprint $ele.modal('shadeIn') 使该对话框自身被遮罩层遮住，方便层上层的调用操作。
pre.prettyprint $ele.modal('shadeOut') 顾名思义，上一条的逆操作。
pre.prettyprint $ele.modal('shadeToggle') 顾名思义，上两条的交替操作。
pre.prettyprint $ele.modal('resize') dialog展示后，如果高度动态发生变化，比如塞入异步数据后撑高容器，则调用该接口使dialog重新定位居中
h3 简单使用方法
p
无需编写JavaScript代码即可生成一个对话框。在一个主控元素，例如按钮，上设置<code>data-toggle="modal"</code>，然后再设置<code>data-target="#foo"</code> 或<code>href="#foo"</code> 用以指向某个将要被启动的对话框。
p
data-属性都是必须的。也可通过
code $ele.modal(opt)
触发,注意这里的<code>$ele</code>是对话框元素，不是触发元素（如某个按钮）
h3 对异步操作的增强支持
p
对确定按钮<code>[data-ok="modal"]</code>动态添加<code>class="disabled"</code> 可以阻止按钮被点击，同时阻止okHide事件的执行
h3 此HTML模板方法对话框针对<code>层上层</code>的处理
p
层上层通常是对 对话框操作的确认提示以及反馈，不会再有复杂业务逻辑,所以合理搭配是：<br>
下层为复杂业务的原型方法对话框，上层为简单静态方法对话框。其他组合可能会有问题。<br>
调用<code>$ele.modal('shade')</code>可以使自身被遮罩（不是全屏遮罩），然后可安心处理上层对话框弹出并让用户操作。
h3 2种对话框的取舍。
p
涉及弹层html结构/的参数（如hasfoot，okbtn，cancelbtn）不适用此类调用方法，因为弹层html结构已经被写在html中，比如不要脚部，则.modal-footer及其子元素不写到html里即可
div.tab-pane#api1
属性参数<code>不止下方这些</code>。除了不能使用回调函数型的参数，其余均和<code>js调用的对话框参数相同</code>，注入data-**属性即可,部分data-属性参数举例：
table.sui-table.table-bordered
thead
tr
th(style="width:100px") 名称
th(style="width:50px") 类型
th(style="width:50px") 默认值
th 描述
tbody
tr
td backdrop
td boolean
td true
td 决定是否为模态对话框添加一个背景遮罩层。另外，该属性指定<code>static</code>时，表示添加遮罩层，同时点击模态对话框的外部区域不会将其关闭。
tr
td keyboard
td boolean
td true
td 按下esc键时关闭模态对话框
tr
td show
td boolean
td true
td 初始化时即显示模态对话框
tr
td remote
td path
td false
td 如果提供了远程url地址，就会通过 jQuery的load方法加载内容并注入到<code>.modal-body</code>中。案例如下
pre.prettyprint <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>
div.tab-pane#event1
p 原型方法的事件接口,与bootstrap提供的一致,与静态方法不互用
table.sui-table.table-bordered
thead
tr
th(style="width:150px") 名称
th 类型
tbody
tr
td show
td 当<code>show</code>方法被调用时，此事件将被立即触发。
tr
td shown
td 当模态对话框呈现到用户面前时（会等待过渡效果执行结束）此事件被触发。
tr
td hide
td 当<code>hide</code>方法被调用时，此事件被立即触发。
tr
td hidden
td 当模态对话框被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。
tr
td okHide
td 当模态对话框因为被点击了确认按钮而被隐藏之前，此事件被立即触发。回调函数可以通过返回<code>true|false</code>控制对话框是否会被继续关闭。如果多次绑定okHide事件，只取最后一次绑定的事件回调执行，并取返回值。
tr
td okHidden
td 当模态对话框因为确认逻辑而被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。
tr
td cancelHide
td 当模态对话框因<code>非</code>确认逻辑而被隐藏之前，此事件被立即触发。
tr
td cancelHidden
td 当模态对话框因<code>非</code>确认逻辑而被隐藏（而且过渡效果执行完毕）之后，此事件将被触发。
pre.prettyprint.linenums.
$('#myModal').on('hidden', function () {
// do something…
})
hr
ul.demo-operations.clearfix
li
a.copy-btn(href='javascript:void(0)', data-target='#demo1>div') 复制代码
h2 2. $.alert/$.confirm静态方法快速生成，返回对话框元素的jQuery对象。用于简单对话框。
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo2', data-toggle='tab') 示例
li
a(href='#code2', data-toggle='tab') 代码
li
a(href='#doc2', data-toggle='tab') 文档
li
a(href='#api2', data-toggle='tab') API
li
a(href='#event2', data-toggle='tab') 事件
div.tab-content
div.tab-pane.active#demo2
div.bs-docs-example
button.sui-btn.btn-primary.btn-lg#J_alert1 $.alert('xxx')
button.sui-btn.btn-primary.btn-lg#J_confirm1 $.confirm('xxx')
script.
$('#J_alert1').on('click', function(e){
$.alert('alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | <br>| alert it is | ')
})
$('#J_confirm1').on('click', function(e){
$.confirm({
body: 'cconfirmconfirmconfirmconfirmconfirmonfirm <br> 这里设置了height属性手动改变高度'
,height: 300
})
})
div.tab-pane#code2
pre.prettyprint.linenums(data-target='#demo2>div')
div.tab-pane#doc2
p 静态方法有alert和confirm
h3 静态方法的构造原则
p 最大限度的还原系统自带alert，confirm的使用体验，快捷同时可通过扩展参数加强功能。
h3 静态方法和原型方法使用的基本原则
p 静态方法适宜于较少重复/多处出现/勿需记忆状态的弹层，可方便的直接调用，最简单形式就是$.alert('亚哈了他了该')。
p 若弹层Dom结构复杂，本身可作为复杂业务组件，建议将弹层html结构写到html里，用$ele.modal(options) 调用。
p 静态方法不调用后不返回实例对象。
div.tab-pane#api2
alert和confirm2个方法的参数一致，参见下面：
pre.prettyprint.linenums.
$.alert({
backdrop: true 决定是否为模态对话框添加一个背景遮罩层。另外，该属性指定<code>static</code>时，表示添加遮罩层，同时点击模态对话框的外部区域不会将其关闭。
bgColor: '#123456' 背景遮罩层颜色，默认是黑色。设为<code>'none'</code>即全透明背景
keyboard: true 是否可由esc按键关闭
title: '自定义标题'
body: 'html' //必填
okBtn : '好的'
cancelBtn : '雅达'
closeBtn: true/false 是否显示右上角叉叉（html使用方式无需配置，直接改html结构即可）
transition: true/false 是否以transition动画方式显示隐藏对话框（html使用方式无需配置，直接删除.sui-modal元素上的类名<code>fade</code>即可）
hasfoot: {Boolean} 是否显示脚部 默认true
width: {number|string(px)|'small'|'normal'|'large'}推荐优先使用后三个描述性字符串，统一样式
height: {number|string(px)} 内容区（.modal-body）高度
remote: {string} 如果提供了远程url地址，就会加载远端内容
timeout: {number} 1000 单位毫秒ms ,对话框打开后多久自动关闭
show: fn --------------function(e){}
shown: fn
hide: fn
hidden: fn
okHide: function(e){alert('点击确认后、对话框消失前的逻辑,
函数返回true（默认）则对话框关闭，反之不关闭;若不传入则默认是直接返回true的函数
注意不要人肉返回undefined！！')}
okHidden: function(e){alert('点击确认后、对话框消失后的逻辑')}
cancelHide: fn 取消关闭前
cancelHidden: fn 取消关闭后
})
div.tab-pane#event2
静态方法事件不用人肉再去写绑定代码，直接将事件回调写进参数。
table.sui-table.table-bordered
thead
tr
th(style="width:150px") 名称
th 类型
tbody
tr
td show
td 方法被调用时对话框尚未展现前，此事件将被立即触发。
tr
td shown
td 对话框展现后此事件被触发。
tr
td hide
td 当对话框因为任何原因（点击确定或取消，等等）要关闭，但尚未关闭前，此事件被立即触发。
tr
td hidden
td 当对话框因为任何原因（点击确定或取消，等等）要关闭，并确实关闭后，此事件被触发。
tr
td okHide
td 当对话框因为触发正向原因（点击确定、保存或之类的逻辑按钮）要关闭，但尚未关闭前，此事件被立即触发。
tr
td okHidden
td 当对话框因为触发正向原因（点击确定、保存或之类的逻辑按钮）要关闭，并确实关闭后，此事件被触发。
hr
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo3', data-toggle='tab') 示例
li
a(href='#code3', data-toggle='tab') 代码
div.tab-content
div.tab-pane.active#demo3
div.bs-docs-example
button.sui-btn.btn-primary.btn-lg#J_lizi1 各种状态检测（打开F12）
script.
$('#J_lizi1').on('click', function(e){
$.confirm({
body: 'confirm again'
,width: 'normal'
,backdrop: true
,bgColor: 'none'
,show: function(){console.log('show')}
,shown: function(){console.log('shown')}
,hide: function(){console.log('hide')}
,hidden: function(){console.log('hiden')}
,okHide: function(){var a=confirm('true or false');if(!a) return false}
,okHidden: function(){console.log('okHidden')}
,cancelHide: function(){console.log('cancelHide')}
,cancelHidden: function(){console.log('cancelHidden')}
})
})
button.sui-btn.btn-primary#J_remote(data-toggle="modal", data-remote="../package.json" data-target="#J_remotemodal") 加载远端内容
div.sui-modal.hide.fade#J_remotemodal(tabindex='-1', role='dialog', data-hasfoot='false')
div.modal-dialog
div.modal-content
div.modal-header
button.sui-close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title remote Modal title
div.modal-body 我是内容body
div.tab-pane#code3
pre.prettyprint.linenums(data-target='#demo3>div')
hr
h3 对话框叠加，层上层
ul.sui-nav.nav-tabs.nav-large
li.active
a(href='#demo4', data-toggle='tab') 示例
li
a(href='#code4', data-toggle='tab') 代码
li
a(href='#doc4', data-toggle='tab') 文档
div.tab-content
div.tab-pane.active#demo4
div.bs-docs-example
button.sui-btn.btn-primary#J_addsuppliers(data-toggle="modal", data-target="#J_addsuppliersDialog", data-width="large", data-backdrop="static") 添加供应商
| <div id="J_addsuppliersDialog" tabindex="-1" role="dialog" class="sui-modal hide fade" data-addSupplierUrl="http://" data-getSuppliersUrl="http://xxx">
| <div class="modal-dialog">
| <div class="modal-content">
| <div class="modal-header">
| <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
| <h4 id="myModalLabel" class="modal-title">供应商收编</h4>
| </div>
| <div class="modal-body sui-form form-horizontal">
| <div class="sui-msg msg-block msg-default msg-tips">
| <div class="msg-con">以下为供销平台上已经获得小二授权经营您的品牌但还未被您进行收编的供应商</div>
| <s class="msg-icon"></s>
| </div>
| <table class="sui-table table-bordered-simple">
| <thead>
| <tr>
| <th>供应商昵称</th>
| <th>公司名称</th>
| <th>供应商类型</th>
| <th>分销商数量</th>
| <th>授权品牌</th>
| <th>操作</th>
| </tr>
| </thead>
| <tbody>
| <tr>
| <td><span>only淘宝商城官方旗舰店</span></td>
| <td><span>九牧官方旗舰店</span></td>
| <td><span>企业</span></td>
| <td><span class="distributor-num">432</span></td>
| <td>
| <ul class="authorize-brand">
| <li>海尔</li>
| <li>统帅</li>
| </ul>
| </td>
| <td data-supplierid="111">
| <button class="sui-btn btn-small J_addOneSupplier" >添加</button>
| </td>
| </tr>
| </tbody>
| </table>
| </div>
| </div>
| </div>
| </div>
script.
$supDialog = $('#J_addsuppliersDialog')
$supDialog.on('click', '.J_addOneSupplier', function(e) {
$supDialog.modal('shadeIn');
return $.confirm({
title: '确认',
body: '您确认添加该供应商吗？',
backdrop: false,
okHide: function() {
$.alert({
hasfoot: false,
backdrop: false,
title: '不管发生了什么，总之成功了',
body: 'msg-large msg-block msg-',
timeout: 1000
});
},
hide: function() {
return $supDialog.modal('shadeOut');
}
});
});
div.tab-pane#code4
pre.prettyprint.linenums(data-target='#demo4>div')
div.tab-pane#doc4
p 有几点注意，使用层上层时
p 底层：一定是复杂对话框，一定是使用的原型方法，即HTML写在模板中的对话框。要设置<code>backdrop:static</code>,已防止上层显示时不小心点击背景使底层消失了。。。
p 上层：只要不是底层，都设置<code>backdrop:false</code>,避免多背景。同时上层show时可以调用底层方法 <code>$supDialog.modal('shadeIn')</code>使底层被遮罩，防止又对底层做了其他操作。上层关闭后调用<code>$supDialog.modal('shadeOut')</code>复原。
hr
h3 绝对定位元素导致对话框的滚动条问题<a name='scroll' class='hidden-achor'></a>
p.sui-lead
| 为了控制对话框的高度，并且在内容超过高度之后可以滚动，我们在 modal-body 上加了如下css代码：
div#modal-body-css(style='display: none;').
overflow-y: auto;
max-height: 550px;
pre.prettyprint.linenums(data-target='#modal-body-css')
| 由于设定了 <code>overflow-y: auto;</code>，如果在 modal-body 中有绝对定位元素并且超过了 modal-body 边界，那么依然会引起滚动。比如在对话框底部用了下拉菜单元素，下拉菜单是绝对定位的，会导致对话框的内容滚动，这种情况下需要给 modal-body 设置<code>overflow: initial</code>。<br>
| 如果想控制高度可以为对话框传入 <code>height</code> 参数。<code>max-height</code>目前可以通过css修改。