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

最新推荐文章于 2021-06-03 09:36:32 发布

weixin_34148456

最新推荐文章于 2021-06-03 09:36:32 发布

阅读量824

点赞数

文章标签： ui javascript ViewUI

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

weixin_34148456

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js插件---Amaze UI dialog如何使用

js插件---Amaze UI dialog如何使用一、总结一句话总结：别人给你列出来的参考手册照着用先 1、在哪里去找插件参考资料或者使用手册（一般位置找不到的时候）？github上面啊，非常详细了 2、dialog中如何动态控制弹出框？方法一：这里可以用将方法赋值给变量的形式，然后再将这个变量show()出来25 var $actions = AMUI.di...
复制链接

扫一扫