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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

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

     <script src="../js/jquery.min.js"></script>

     <script src="../js/amazeui.min.js"></script>

     <script src="dialog-master/dist/amazeui.dialog.min.js"></script>

 </head>

 <body>

     <buttong class="am-btn am-btn-primary js-alert">点击显示 Alert</buttong>

     <script>

       $('.js-alert').on('click', function() {

         AMUI.dialog.alert({

           title: 'Alert 窗口',

           content: 'Hello world.',

           onConfirm: function() {

             console.log('close');

           }

         });

       });

     </script>

 </body>

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

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

js插件---Amaze UI dialog如何使用的更多相关文章

  1. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  2. amazeui学习笔记--js插件（UI增强）--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  3. amazeui学习笔记--js插件（UI增强4）--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...

  4. amazeui学习笔记--js插件（UI增强3）--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

  5. amazeui学习笔记--js插件（UI增强2）--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  6. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  7. Amaze UI学习笔记——JS学习历程一

    1.自定义事件 (1)一些组件提供了自定义事件,命名方式为{事件名称}.{组件名称}.amui,用户可以查看组件文档了解.使用这些事件,如: $('#myAlert').on('close.alert ...

  8. javascript模板插件amaze.js

    摘要: 最近在开发项目时,异步接口需要前端渲染数据,js拼接太低级,必然要用模板插件.之前用过基于jQuery的和juicer等插件,考虑到以后公司项目上的统一,移动端和pc端上的统一,以及可维护性, ...

  9. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

随机推荐

  1. 关于md解析器

    不得不说,博客园的 md 解析器真的不够好.和 csdn 以及 sf 社区的比起来,差太多了.以后,博客园就老老实实写随笔了,文章类的还是用 csdn 吧.

  2. 前端验证银行卡（Luhn校验算法）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. salt的grains

    grains作用: 1.匹配 minion 2.收集信息 (每次重启minion才会收集) grains 数据存储在minion端. salt '*' grains.ls salt '*' grain ...

  4. notepad++调用python3中文乱码

    使用notepad++,配置好快捷键调用python3,一切就绪,仿佛就差代码了,结果一使用, 中文乱码,一直没有好的解决办法. 最后只能在代码中增加一行重写向输出解决,示例如下: #!/usr/bi ...

  5. 开源映射平台Mapzen加入了Linux基金会的项目

    2019年1月29日,Linux基金会宣布,开源映射平台Mapzen现在是Linux基金会项目的一部分. Mapzen专注于地图显示的核心组件,如搜索和导航.它为开发人员提供了易于访问的开放软件和数据 ...

  6. 【转载】解决django models文件修改后的数据库同步问题——south模块

    转载链接:https://www.cnblogs.com/frchen/p/5732490.html 在使用django进行开发时,往往需要根据不同的需求对model进行更改.而这时候,python ...

  7. 【Codeforces Round #462 (Div. 1) A】 A Twisty Movement

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] ans初值值为a[1..n]中1的个数. 接下来考虑以2为结尾的最长上升子序列的个数. 枚举中间点i. 计算1..i-1中1的个数c ...

  8. Spring Cloud学习笔记【八】服务网关 Zuul（过滤器）

    在上篇文章中我们了解了 Spring Cloud Zuul 作为网关所具备的最基本功能:路由(Router),下面我们将关注 Spring Cloud Zuul 的另一核心功能:过滤器(Filter) ...

  9. HDU——T 2818 Building Block

    http://acm.hdu.edu.cn/showproblem.php?pid=2818 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  10. C. Diverse Permutation（Codeforces Round #275(div2)

    C. Diverse Permutation time limit per test 1 second memory limit per test 256 megabytes input standa ...