时间戳

首页 > 技术文章 > js插件---Amaze UI dialog如何使用

js插件---Amaze UI dialog如何使用

Renyi-Fan 2018-09-03 22:56 原文

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: '正文'});

 

 

 

 

 

推荐阅读