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. leetcode 生成杨辉三角形， 118 119 Pascal's Triangle 1，2

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...

  2. ELK到底是什么？那么多公司用！__转载

    Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用ELK!ELK!ELK! ELK竟然重复了三遍,是个什么?   一.ELK ...

  3. letCode(771 Jewels and Stones )

    问题描述: You're given strings J representing the types of stones that are jewels, and S representing th ...

  4. caioj 1112 树形动态规划（TreeDP）7：战略游戏

    这道题和上一道题非常相似 这道题是看边,上一道是看点. 但是状态定义不同 看边的话没有不放不安全这种状态 因为当前结点的父亲无法让这颗子树没有看到的边看到 所以这种状态不存在 而上一道题存在不放不安全 ...

  5. OpenJDK源码研究笔记(六)--观察者模式工具类(Observer和Observable)和应用示例

    本文主要讲解OpenJDK观察者模式的2个工具类,java.util.Observer观察者接口,java.util.Observable被观察者基类. 然后,给出了一个常见的观察者应用示例. Obs ...

  6. unity SystemInfo类 获得电量battery

    我觉得用Unity 开发最爽的地方, 不是unity跨平台,而是用其他语言,要用很复杂的逻辑才能完成的功能,unity用一两句代码就能搞定 就比如说获取Android 系统的电量,不用发广播,不用申请 ...

  7. 浴谷 P1768 天路

    P1768 天路 题目描述 “那是一条神奇的天路诶~,把第一个神犇送上天堂~”,XDM先生唱着这首“亲切”的歌曲,一道猥琐题目的灵感在脑中出现了. 和C_SUNSHINE大神商量后,这道猥琐的题目终于 ...

  8. [Poi] Build a Vue App with Poi

    Poi uses the Vue babel presets by default, so there is no additional install required to get up-and- ...

  9. 【POJ3377】Ferry Lanes 最短路

    我仅仅是贴一下手写堆优化的dij模板.尽管.它.TLE了--**** #include <cstdio> #include <cstring> #include <ios ...

  10. Import .bak file to a database in SQL server

    https://stackoverflow.com/questions/1535914/import-bak-file-to-a-database-in-sql-server On SQL Serve ...