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. Hadoop框架基础（一）

    ** Hadoop框架基础(一)     学习一个新的东西,传统而言呢,总喜欢漫无目的的扯来扯去,比如扯扯发展史,扯扯作者是谁,而我认为这些东西对于刚开始接触,并以开发为目的学者是没有什么帮助的,反而 ...

  2. Bayes++ Library入门学习之熟悉class-Bayesian_filter_base(1)

    在对Bayes++库的名称空间有了一个大概的了解之后,我们开始学习该名称空间下的第一个子类Bayesian_filter::Bayes_filter_base. 该类与其子类的继承关系图如下图所示. ...

  3. ES6学习笔记（十六）async函数

    1.含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖,号称异步的终极解决方案. 前文有一个 Gen ...

  4. 与 JSON 相关的一些操作 (项目中用到一部分，后续逐渐完善)

    1.JSON 打印 console.log(JSON.stringify(data, null, 4)); 2.JSON 格式判断 var isjson = typeof(obj) == " ...

  5. 守护、互斥锁、IPC和生产者消费者模型

    守护进程 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic processes are ...

  6. Ubuntu下哪个PDF阅读器更好使？？？

    根据windows系统上的经验,果断选择了foxit reader的linux版本: 从 http://www.foxitsoftware.com/downloads/ 选择 “Desktop Lin ...

  7. Linux 常用命令：系统状态篇

    前言 Linux常用命令中,有些命令可以用于查看系统的状态,通过了解系统当前的状态,能够帮助我们更好地维护系统或定位问题.本文就简单介绍一下这些命令. 1. 查看系统运行时间--uptime 有时候我 ...

  8. python 调试大法-大笨蛋的笔记

    说在前面 我觉得没有什么错误是调试器无法解决的,如果没有,那我再说一遍,如果有,那当我没说 一.抛出异常 可以通过 raise 语句抛出异常,使程序在我们已经知道的缺陷处停下,并进入到 except  ...

  9. HDU 4976 A simple greedy problem. 贪心+DP

    题意: 给定n<=1000个小兵,A每次都能使小兵掉1点血,B每次能使所有小兵掉1点血,A.B轮流攻击,每次轮到A他会选择是否攻击,轮到B必须攻击.求A最多能杀死多少小兵.(当小兵血量为1时被攻 ...

  10. 移动端开发ios和安卓兼容问题

    移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...