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 模板封装。

使用说明：

  1. 获取 Amaze UI dialog
  1. 在 Amaze UI 样式之后引入 dialog 样式（dist 目录下的 CSS）：

Amaze UI dialog 依赖 Amaze UI 样式。

<link rel="stylesheet" href="path/to/amazeui.min.css"/>
  1. 引入 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>
  1. 调用 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说明

使用说明：

  1. 获取 Amaze UI dialog

  2. 在 Amaze UI 样式之后引入 dialog 样式（dist 目录下的 CSS）：

    Amaze UI dialog 依赖 Amaze UI 样式。

    <link rel="stylesheet" href="path/to/amazeui.min.css"/>

  3. 引入 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>

  4. 调用 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: \'正文\'});

 

 

 

 

 

版权声明：本文为Renyi-Fan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Renyi-Fan/p/9581714.html