js插件---Amaze UI dialog如何使用
一、总结
一句话总结：别人给你列出来的参考手册照着用先
1、在哪里去找插件参考资料或者使用手册（一般位置找不到的时候）？
github上面啊，非常详细了
2、dialog中如何动态控制弹出框？
方法一：这里可以用将方法赋值给变量的形式，然后再将这个变量show()出来
25 var $actions = AMUI.dialog.actions({
26 title: '标题啊',
27 items: [
28 {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'},
29 {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'},
30 {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'}
31 ],
32 onSelected: function(index, target) {
33 console.log(index);
34 $actions.close();
35 }
36 });
37
38 $actions.show();
方法二：直接封装在某个方法体类，比如onclick
14 <script>
15 $('.js-alert').on('click', function() {
16 AMUI.dialog.alert({
17 title: 'Alert 窗口',
18 content: 'Hello world.',
19 onConfirm: function() {
20 console.log('close');
21 }
22 });
23 });
24 </script>
二、最简单样例
1、截图
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="../css/amazeui.min.css"/> 7 <script src="../js/jquery.min.js"></script> 8 <script src="../js/amazeui.min.js"></script> 9 <script src="dialog-master/dist/amazeui.dialog.min.js"></script> 10 </head> 11 <body> 12 <buttong class="am-btn am-btn-primary js-alert">点击显示 Alert</buttong> 13 14 <script> 15 $('.js-alert').on('click', function() { 16 AMUI.dialog.alert({ 17 title: 'Alert 窗口', 18 content: 'Hello world.', 19 onConfirm: function() { 20 console.log('close'); 21 } 22 }); 23 }); 24 </script> 25 26 </body> 27 </html>
三、github上面使用手册
Amaze UI Modal 插件 HTML 模板封装。
使用说明：
- 获取 Amaze UI dialog
- 直接下载
- 使用 NPM:
npm install amazeui-dialog
- 在 Amaze UI 样式之后引入 dialog 样式（
dist目录下的 CSS）：
Amaze UI dialog 依赖 Amaze UI 样式。
<link rel="stylesheet" href="path/to/amazeui.min.css"/>
- 引入 dialog 插件（
dist目录下的 JS）：
<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.min.js"></script>
<script src="path/to/amazeui.dialog.min.js"></script>
- 调用 dialog:
1 AMUI.dialog.alert({ 2 title: '错误提示', 3 content: '你的家还好吧', 4 onConfirm: function() { 5 console.log('close'); 6 } 7 }); 8 9 AMUI.dialog.confirm({ 10 title: '错误提示', 11 content: '正文内容', 12 onConfirm: function() { 13 console.log('onConfirm'); 14 }, 15 onCancel: function() { 16 console.log('onCancel') 17 } 18 }); 19 20 var $loading = AMUI.dialog.loading(); 21 setTimeout(function() { 22 $loading.modal('close'); 23 }, 3000); 24 25 var $actions = AMUI.dialog.actions({ 26 title: '标题啊', 27 items: [ 28 {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'}, 29 {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'}, 30 {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'} 31 ], 32 onSelected: function(index, target) { 33 console.log(index); 34 $actions.close(); 35 } 36 }); 37 38 $actions.show(); 39 40 AMUI.dialog.popup({title: '标题', content: '正文'});
四、amaze ui官方使用dialog说明
使用说明：
-
获取 Amaze UI dialog
- 直接下载
- 使用 NPM:
npm install amazeui-dialog
-
在 Amaze UI 样式之后引入 dialog 样式（
dist目录下的 CSS）：Amaze UI dialog 依赖 Amaze UI 样式。
<link rel="stylesheet" href="path/to/amazeui.min.css"/> -
引入 dialog 插件（
dist目录下的 JS）：<script src="path/to/jquery.min.js"></script> <script src="path/to/amazeui.min.js"></script> <script src="path/to/amazeui.dialog.min.js"></script> -
调用 dialog:
AMUI.dialog.alert({ title: '错误提示', content: '你的家还好吧', onConfirm: function() { console.log('close'); } }); AMUI.dialog.confirm({ title: '错误提示', content: '正文内容', onConfirm: function() { console.log('onConfirm'); }, onCancel: function() { console.log('onCancel') } }); var $loading = AMUI.dialog.loading(); setTimeout(function() { $loading.modal('close'); }, 3000); var $actions = AMUI.dialog.actions({ title: '标题啊', items: [ {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'}, {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'}, {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'} ], onSelected: function(index, target) { console.log(index); $actions.close(); } }); $actions.show(); AMUI.dialog.popup({title: '标题', content: '正文'});