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. Lumia 1520 IE mobile window.devicePixelRatio

    Lumia 1520 IE11 mobile -> window.devicePixelRatio = 2.217964285714286 Lumia 1520 UAP 环境 -> win ...

  2. Git放弃本地更改恢复到资源库版本

    使用git版本控制工具在本地clone一份代码后,如果发现修改错误想恢复到资源库版本,下面两行可以轻松加愉快的搞定: git clean -xdf git checkout -f git的更多详细用法 ...

  3. Android属性动画-ValueAnimator和ObjectAnimator的高级用法

    ValueAnimator的高级用法 在上篇文章中介绍补间动画缺点的时候有提到过,补间动画是只能对View对象进行动画操作的.而属性动画就不再受这个限制,它可以对任意对象进行动画操作.那么大家应该还记 ...

  4. stuff(param1, startIndex, length, param2)

    1.作用 stuff(param1, startIndex, length, param2)将param1中自startIndex(SQL中都是从1开始,而非0)起,删除length个字符,然后用pa ...

  5. 由于webpack-cli版本问题造成的错误

    The CLI moved into a separate package: webpack-cli Please install 'webpack-cli' in addition to webpa ...

  6. 关联Anaconda和最新Pycharm2018.3.2

    在Anaconda和Pycharm 2018.3.2 x64都安装好之后,进行Anaconda 与Pycharm的关联操作 首先File -->New Project 打开以后切记要把Proje ...

  7. 第一章、zabbix安装

    前言: 注意:本文不涉及性能测试.性能优化中的监控,所有文字的出发点都是日常运维监控. 在开始之前,我们还是先统一下认识:要监控一个对象,需要掌握哪些东西呢? 监控对象的理解:要监控的对象你是否了解呢 ...

  8. man帮助

    man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息.

  9. photoshop快捷键汇总

    图层应用相关快捷键: 复制图层:Ctrl+j 盖印图层:Ctrl+Alt+Shift+E 向下合并图层:Ctrl+E 合并可见图层:Ctrl+Shift+E 激活上一图层:Alt+中括号(]) 激活下 ...

  10. Watcher详解 工作机制， Watcher客户端注册、Watcher 服务端注册

    Watcher详解.接口 在 ZooKeeper 中, 接口类 Watcher 用于表示一个标注你的事件处理器,其定义了事件通知相关的逻辑,包含 KeeperState 和 EventType 两个枚 ...