-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
601 lines (531 loc) · 22.1 KB
/
index.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
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
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="author" content="mishengqiang">
<meta name="description" content="sweetalert是一个漂亮的弹窗。">
<meta name="keywords" content="JavaScript,alert,swal,sweetalert">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>SweetAlert中文</title>
<link rel="stylesheet" href="css/example.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- This is what you need -->
<script src="js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="css/sweetalert.css">
<!--.......................-->
</head>
<body>
<h1>Sweet Alert</h1>
<h2>完美得无可替代</h2>
<button class="download">下载</button>
<!-- What does it do? -->
<h3>那么……它都能做什么呢？</h3>
<p>让我们来比较看一下错误消息的显示。第一个使用了内置的<strong>alert</strong>，第二个使用了<strong>sweetAlert</strong>。</p>
<div class="showcase normal">
<h4>普通alert</h4>
<button>显示错误信息</button>
<h5>代码:</h5>
<pre><span class="attr">alert</span>(<span class="str">"哎呦……出错了！"</span>);</pre>
<div class="vs-icon"></div>
</div>
<div class="showcase sweet">
<h4>Sweet Alert</h4>
<button>显示错误信息</button>
<h5>代码:</h5>
<pre><span class="attr">sweetAlert</span>(<span class="str">"哎呦……"</span>, <span class="str">"出错了！"</span>,<span class="str">"error"</span>);</pre>
</div>
<p>非常漂亮吧？无论你是在电脑、手机还是平板上，SweetAlert都会在页面上自动居中显示，这看起来非常棒。SweetAlert还可高度定制，正如下面你所看到的。</p>
<!-- Examples -->
<h3>示例</h3>
<p class="center">在这些实例中，我们使用了简称函数<strong>swal</strong>调用sweetAlert。</p>
<ul class="examples">
<li class="message">
<div class="ui">
<p>基本信息弹窗</p>
<button>尝试一下</button>
</div>
<pre><span class="attr">swal</span>(<span class="str">"这是一条信息！"</span>)</pre>
</li>
<li class="title-text">
<div class="ui">
<p>标题与文本的信息弹窗</p>
<button>尝试一下</button>
</div>
<pre><span class="attr">swal</span>(<span class="str">"这是一条信息！"</span>, <span class="str">"很漂亮，不是吗？"</span>)</pre>
</li>
<li class="success">
<div class="ui">
<p>成功信息弹窗！</p>
<button>尝试一下</button>
</div>
<pre><span class="attr">swal</span>(<span class="str">"干得漂亮！"</span>, <span class="str">"你点击了按钮！"</span>,<span class="str">"success"</span>)</pre>
</li>
<li class="warning confirm">
<div class="ui">
<p>警告信息弹窗，“确认”按钮带有一个函数……</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"确定删除吗？"</span>,
text: <span class="str">"你将无法恢复该虚拟文件！"</span>,
type: <span class="str">"warning"</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonColor: <span class="str">"#DD6B55"</span>,
confirmButtonText: <span class="str">"确定删除！"</span>,
closeOnConfirm: <span class="val">false</span>
},
<span class="func"><i>function</i></span>(){
<span class="attr">swal</span>(<span class="str">"删除！"</span>, <span class="str">"你的虚拟文件已经被删除。"</span>, <span class="str">"success"</span>);
});
</pre>
</li>
<li class="warning cancel">
<div class="ui">
<p>…… 给函数传入参数，"取消"按钮也可以执行。</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"确定删除吗？"</span>,
text: <span class="str">"你将无法恢复该虚拟文件！"</span>,
type: <span class="str">"warning"</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonColor: <span class="str">"#DD6B55"</span>,
confirmButtonText: <span class="str">"确定删除！"</span>,
cancelButtonText: <span class="str">"取消删除！"</span>,
closeOnConfirm: <span class="val">false</span>,
closeOnCancel: <span class="val">false</span>
},
<span class="func"><i>function</i></span>(isConfirm){
<span class="tag">if</span> (isConfirm) {
<span class="attr">swal</span>(<span class="str">"删除！"</span>, <span class="str">"你的虚拟文件已经被删除。"</span>,
<span class="str">"success"</span>);
} <span class="tag">else</span> {
<span class="attr">swal</span>(<span class="str">"取消！"</span>, <span class="str">"你的虚拟文件是安全的:)"</span>,
<span class="str">"error"</span>);
}
});
</pre>
</li>
<li class="custom-icon">
<div class="ui">
<p>自定义图标信息弹窗</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"漂亮！"</span>,
text: <span class="str">"这是自定义图标。"</span>,
imageUrl: <span class="str">"images/thumbs-up.jpg"</span>
});
</pre>
</li>
<li class="message-html">
<div class="ui">
<p>HTML信息弹窗</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"HTML <small>标题</small>!"</span>,
text: <span class="str">"自定义<span style="color:#F8BB86">html<span>信息。"</span>,
html: <span class="val">true</span>
});
</pre>
</li>
<li class="timer">
<div class="ui">
<p>定时关闭信息弹窗</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"自动关闭弹窗！"</span>,
text: <span class="str">"2秒后自动关闭。"</span>,
timer: <span class="val">2000</span>,
showConfirmButton: <span class="val">false</span>
});
</pre>
</li>
<li class="input">
<div class="ui">
<p>输入信息弹窗</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"输入！"</span>,
text: <span class="str">"输入一些有趣的话："</span>,
type: <span class="str">"input"</span>,
showCancelButton: <span class="val">true</span>,
closeOnConfirm: <span class="val">false</span>,
animation: <span class="str">"slide-from-top"</span>,
inputPlaceholder: <span class="str">"输入一些话"</span>
},
<span class="func"><i>function</i></span>(<span class="arg">inputValue</span>){
<span class="tag">if</span> (inputValue <span class="tag">===</span> <span class="val">false</span>) <span class="tag">return</span><span class="val">false</span>;
<span class="tag">if</span> (inputValue <span class="tag">===</span> <span class="str">""</span>) {
swal<span class="tag">.</span><span class="attr">showInputError</span>(<span class="str">"你需要输入一些话！"</span>);
<span class="tag">return</span> <span class="val">false</span>
}
<span class="attr">swal</span>(<span class="str">"非常好！"</span>, <span class="str">"你输入了："</span> + inputValue,<span class="str">"success"</span>);
});
</pre>
</li>
<li class="ajax">
<div class="ui">
<p>加载(AJAX请求示例)弹窗</p>
<button>尝试一下</button>
</div>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"Ajax请求示例"</span>,
text: <span class="str">"提交运行ajax请求"</span>,
type: <span class="str">"info"</span>,
showCancelButton: <span class="val">true</span>,
closeOnConfirm: <span class="val">false</span>,
showLoaderOnConfirm: <span class="val">true</span>,
},
<span class="func"><i>function</i></span>(){
<span class="attr">setTimeout</span>(<span class="func"><i>function</i></span>(){
<span class="attr">swal</span>(<span class="str">"Ajax请求完成！"</span>);
}, <span class="val">2000</span>);
});
</pre>
</li>
<li class="theme">
<div class="ui">
<p>你可以改变SweetAlert的主题样式!</p>
<button>尝试一下</button>
</div>
<pre>
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"dist/sweetalert.css"</span>>
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"themes/twitter.css"</span>>
</pre>
</li>
</ul>
<!-- Download & Install -->
<h3 id="download-section">下载 & 安装</h3>
<div class="center-container">
<p class="center"><b>方式 1：</b>通过bower安装：</p>
<pre class="center">$ bower install sweetalert</pre>
</div>
<div class="center-container">
<p class="center"><b>方式 2：</b>通过NPM安装：</p>
<pre class="center">$ npm install sweetalert</pre>
</div>
<p class="center"><b>方式 3：</b>下载sweetAlert的<strong>CSS</strong>和<strong>JavaScript</strong>文件。</p>
<a class="button" href="https://github.com/t4t5/sweetalert/archive/master.zip" download>下载文件</a>
<ol>
<li>
<p>引用必要的文件初始化插件：</p>
<pre>
<<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"dist/sweetalert.min.js"</span>></<span class="tag">script</span>>
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"dist/sweetalert.css"</span>>
</pre>
</li>
<li>
<p>页面加载完成后调用sweetAlert函数</p>
<pre>
<span class="attr">swal</span>({
title: <span class="str">"Error!"</span>,
text: <span class="str">"Here's my error message!"</span>,
type: <span class="str">"error"</span>,
confirmButtonText: <span class="str">"Cool"</span>
});
</pre>
</li>
</ol>
<!-- Configuration -->
<h3>配置</h3>
<p class="center">你可以使用这些参数，通过一个对象传入到sweetAlert中：</p>
<table>
<tr class="titles">
<th>
<div class="border-left"></div>
参数
</th>
<th>默认值</th>
<th>
<div class="border-right"></div>
描述
</th>
</tr>
<tr>
<td><b>title</b></td>
<td><i>null (required)</i></td>
<td>弹窗的标题。可以通过对象的”title”属性或第一个参数进行传递。</td>
</tr>
<tr>
<td><b>text</b></td>
<td><i>null</i></td>
<td>弹窗的描述。可以通过对象的”text”属性或第二个参数进行传递。</td>
</tr>
<tr>
<td><b>type</b></td>
<td><i>null</i></td>
<td>弹窗的类型。SweetAlert有四个内置类型，可以展示相应的图标动画: "<strong>warning</strong>","<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>。你也可以设置为"<strong>input</strong>"类型变成输入弹窗。可以通过对象的”type”属性或第三个参数进行传递。
</td>
</tr>
<tr>
<td><b>allowEscapeKey</b></td>
<td><i>true</i></td>
<td>如果设置为<strong>true</strong>，用户可以通过按下Escape键关闭弹窗。</td>
</tr>
<tr>
<td><b>customClass</b></td>
<td><i>null</i></td>
<td>弹窗的自定义样式，可以通过对象的"customClass"属性进行添加。</td>
</tr>
<tr>
<td><b>allowOutsideClick</b></td>
<td><i>false</i></td>
<td>如果设置为<strong>true</strong>，用户点击弹窗外部可关闭弹窗。</td>
</tr>
<tr>
<td><b>showCancelButton</b></td>
<td><i>false</i></td>
<td>如果设置为<strong>true</strong>，“取消”按钮将会显示，用户点击取消按钮会关闭弹窗。</td>
</tr>
<tr>
<td><b>showConfirmButton</b></td>
<td><i>true</i></td>
<td>如果设置为<strong>false</strong>，“确认”按钮将会隐藏。为了良好的用户体验，最好你设置了定时关闭或者allowOutsideClick为true时才将该参数设置为false。</td>
</tr>
<tr>
<td><b>confirmButtonText</b></td>
<td><i>"OK"</i></td>
<td>使用该参数来修改“确认”按钮的显示文本。如果showCancelButton设置为true，确定按钮的显示文本将会自动使用“Confirm”而不是“OK”。</td>
</tr>
<tr>
<td><b>confirmButtonColor</b></td>
<td><i>"#AEDEF4"</i></td>
<td>使用该参数来修改“确认”按钮的背景颜色（必须是十六进制值）。</td>
</tr>
<tr>
<td><b>cancelButtonText</b></td>
<td><i>"Cancel"</i></td>
<td>使用该参数来修改“取消”按钮的显示文本。</td>
</tr>
<tr>
<td><b>closeOnConfirm</b></td>
<td><i>true</i></td>
<td>设置为<i>false</i>，用户点击“确认”按钮后，弹窗会继续保持打开状态。如果点击“确认”按钮后需要打开另一个SweetAlert弹窗，这是非常有用的。</td>
</tr>
<tr>
<td><b>closeOnCancel</b></td>
<td><i>true</i></td>
<td>这和closeOnConfirm的功能相似，只不过这个是“取消”按钮。</td>
</tr>
<tr>
<td><b>imageUrl</b></td>
<td><i>null</i></td>
<td>为弹窗添加一个自定义的图标。这个参数是一个字符串图片路径。</td>
</tr>
<tr>
<td><b>imageSize</b></td>
<td><i>"80x80"</i></td>
<td>如果设置了imageUrl，你可以使用像素（px）指定图片大小来描述你想要多大的图标。在一个字符串中使用“x”来分割两个值，第一个值是宽度，第二值是高度。</td>
</tr>
<tr>
<td><b>timer</b></td>
<td><i>null</i></td>
<td>自动关闭弹窗的定时器。单位为毫秒（ms）。</td>
</tr>
<tr>
<td><b>html</b></td>
<td><i>false</i></td>
<td>如果你设置为<strong>true</strong>，参数title和参数text的值将会被html解析显示而不是纯文本。（如果你担心被XSS攻击那就设置为<strong>false</strong>。）</td>
</tr>
<tr>
<td><b>animation</b></td>
<td><i>true</i></td>
<td>如果设置为<strong>false</strong>, 弹窗的动画将会被禁用。其它字符串值：<strong>pop</strong>(这是animation设置为true时的默认值), <strong>slide-from-top</strong>, <strong>slide-from-bottom</strong></td>
</tr>
<tr>
<td><b>inputType</b></td>
<td><i>"text"</i></td>
<td>当使用<strong>type: "input"</strong>时，该参数用来改变输入的类型(例如：如果你想让用户输入密码，这可能是有用的)。</td>
</tr>
<tr>
<td><b>inputPlaceholder</b></td>
<td><i>null</i></td>
<td>当使用输入类型时，你可以使用placeholder来帮助用户明白应该输入什么内容。</td>
</tr>
<tr>
<td><b>inputValue</b></td>
<td><i>null</i></td>
<td>当使用<strong>type: "input"</strong>时，你希望在输入前展示默认值时，可以指定一个默认值。</td>
</tr>
<tr>
<td><b>showLoaderOnConfirm</b></td>
<td><i>false</i></td>
<td>设置为<strong>true</strong>，当处于加载时会禁用确认按钮并显示为加载样式。</td>
</tr>
</table>
<!-- Methods -->
<h3>方法</h3>
<p class="center">SweetAlert还带有一些简单的方法，你可以调用它们：</p>
<table>
<tr class="titles">
<th>
<div class="border-left"></div>
方法
</th>
<th>示例</th>
<th>
<div class="border-right"></div>
描述
</th>
</tr>
<tr>
<td>setDefaults</td>
<td><i>swal.setDefaults({ confirmButtonColor: '#0000' });</i></td>
<td>当调用SweetAlert时，如果你使用很多相同的设置，您可以在程序的开始使用setDefaults设置它们！</td>
</tr>
<tr>
<td>close</td>
<td><i>swal.close();</i></td>
<td>通过编程的方式将当前打开的SweetAlert弹窗关闭。</td>
</tr>
<tr>
<td>showInputError</td>
<td><i>swal.showInputError("Invalid email!");</i></td>
<td>如果用户输入的数据是错误的，在验证输入字段后会显示一个错误的信息。</td>
</tr>
<tr>
<td>enableButtons, disableButtons</td>
<td><i>swal.disableButtons();</i></td>
<td>禁用或启用用户点击取消按钮和确认按钮。</td>
</tr>
</table>
<!-- Contribute -->
<h3>贡献</h3>
<p>SweetAlert是由<a href="http://tristanedwards.me" target="_blank">Tristan Edwards</a>创建的，你可以关注他的<a href="https://twitter.com/t4t5" target="_blank" class="twitter">Twitter</a>或者<a href="https://dribbble.com/tristanedwards" target="_blank" class="dribbble">Dribbble</a>更新和其它酷的项目！</p>
<p>如果你想要添加新特性，欢迎你在<a href="https://github.com/t4t5/sweetalert" class="github">GitHub</a>上fork SweetAlert项目！</p>
<footer>
<span class="te-logo">TE</span> • <script>document.write(new Date().getFullYear())</script>
</footer>
<p class="center">本站点翻译自<a style="display: inline-block;width: 90px;height: 18px;margin-top: -3px;text-indent: -9999px;background-image: url(./images/logo_small.png);background-image: -webkit-image-set(url(./images/logo_small.png) 1x, url(./images/[email protected]) 2x);background-size: cover;vertical-align: middle;" href="http://t4t5.github.io/sweetalert/">SweetAlert</a></p>
<script>
document.querySelector('button.download').onclick = function(){
$("html, body").animate({ scrollTop: $("#download-section").offset().top }, 1000);
};
document.querySelector('.showcase.normal button').onclick = function(){
alert("哎呦……出错了！");
};
document.querySelector('.showcase.sweet button').onclick = function(){
swal("哎呦……", "出错了！", "error");
};
document.querySelector('ul.examples li.message button').onclick = function(){
swal("这是一条信息！");
};
document.querySelector('ul.examples li.timer button').onclick = function(){
swal({
title: "自动关闭弹窗！",
text: "2秒后自动关闭。",
timer: 2000,
showConfirmButton: false
});
};
document.querySelector('ul.examples li.title-text button').onclick = function(){
swal("这是一条信息！", "很漂亮，不是吗？");
};
document.querySelector('ul.examples li.success button').onclick = function(){
swal("干得漂亮！", "你点击了按钮！", "success");
};
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
swal({
title: "确定删除吗？",
text: "你将无法恢复该虚拟文件！",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: '确定删除！',
closeOnConfirm: false
},
function(){
swal("删除！", "你的虚拟文件已经被删除。", "success");
});
};
document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
swal({
title: "确定删除吗？",
text: "你将无法恢复该虚拟文件！",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: '确定删除！',
cancelButtonText: "取消删除！",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm){
swal("删除！", "你的虚拟文件已经被删除。", "success");
} else {
swal("取消！", "你的虚拟文件是安全的:)", "error");
}
});
};
document.querySelector('ul.examples li.custom-icon button').onclick = function(){
swal({
title: "漂亮！",
text: "这是自定义图标。",
imageUrl: 'images/thumbs-up.jpg'
});
};
document.querySelector('ul.examples li.message-html button').onclick = function(){
swal({
title: "HTML <small>标题</small>!",
text: '自定义<span style="color:#F8BB86">html<span>信息。',
html: true
});
};
document.querySelector('ul.examples li.input button').onclick = function(){
swal({
title: "输入！",
text: '输入一些有趣的话：',
type: 'input',
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "输入一些话",
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("你需要输入一些话！");
return false;
}
swal("非常好！", '你输入了：' + inputValue, "success");
});
};
document.querySelector('ul.examples li.theme button').onclick = function() {
swal({
title: "主题！",
text: "这是Twitter主题的SweetAlert!",
confirmButtonText: "酷！",
customClass: 'twitter'
});
};
document.querySelector('ul.examples li.ajax button').onclick = function() {
swal({
title: 'Ajax请求示例',
text: '提交运行ajax请求',
type: 'info',
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function(){
setTimeout(function() {
swal('Ajax请求完成！');
}, 2000);
});
};
</script>
</body>
</html>