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. Objects and values

    If we execute these assignment statements: We know that a and b both refer to a string, but we don’t ...

  2. VS Code(Visual Studio Code)

    这次推荐 VS Code,这是个跨平台.免费的代码编辑器,集成开发.调试.编译为一身.单成启动速度,资源占用,就已经赢了各大编辑器(什么 SB.N++之类).以前觉得 VS 2015 是宇宙最强编辑器 ...

  3. Android仿微信进度弹出框的实现方法

    MainActivity: package com.ruru.dialogproject; import android.app.Activity; import android.os.Bundle; ...

  4. PostgreSQL Replication之第二章 理解PostgreSQL的事务日志（4）

    2.4 调整检查点和XLOG 目前为止,这一章已经提供深入洞察PostgreSQL如何写入数据,一般来说,XLOG是用来干什么的.考虑到这方面的知识,我们现在可以继续并学习我们能做些什么来使我们的数据 ...

  5. iOS网络缓存机制

    iOS的网络引擎自带缓存机制: 网络请求在经过网络引擎时有过处理(添加了字段),所以用api的网络请求无法获取缓存. [NSURLCache sharedURLCache]

  6. linux Cenos-7.0下安装jdk搭建环境变量

    搭建linux系统的java环境本人目前所知有两种方式: 第一种是从oracle官网下载linux系统的jdk版本: 第二种是使用yum命令的方式下载安装,咱们今天讲的是第一种方式. 一.工具准备: ...

  7. 【Fiddler】使用fiddler抓取指定浏览器的包

    参考资料:http://blog.csdn.net/sufubo/article/details/49331705 使用fiddler抓取不到浏览器的包时常用的解决办法: 1.必须先打开Fiddler ...

  8. 百度地图API的使用示例

    刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用.百度地图API,集成简单好用,全面,兼容问题,文档全面: 官方文 ...

  9. 05-数据类型转换（bool转换）

    05-数据类型转换(bool转换)

  10. 【转】30分钟掌握 C#6

    [转]30分钟掌握 C#6 1. 只读自动属性(Read-only auto-properties) C# 6之前我们构建只读自动属性: public string FirstName { get; ...