• js插件---Amaze UI dialog如何使用


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

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <link rel="stylesheet" href="../css/amazeui.min.css"/>
     7     <script src="../js/jquery.min.js"></script> 
     8     <script src="../js/amazeui.min.js"></script> 
     9     <script src="dialog-master/dist/amazeui.dialog.min.js"></script>
    10 </head>
    11 <body>
    12     <buttong class="am-btn am-btn-primary js-alert">点击显示 Alert</buttong>
    13 
    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>
    25 
    26 </body>
    27 </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:
     1 AMUI.dialog.alert({
     2     title: '错误提示',
     3     content: '你的家还好吧',
     4     onConfirm: function() {
     5         console.log('close');
     6       }
     7 });
     8 
     9 AMUI.dialog.confirm({
    10     title: '错误提示',
    11     content: '正文内容',
    12     onConfirm: function() {
    13       console.log('onConfirm');
    14     },
    15     onCancel: function() {
    16       console.log('onCancel')
    17     }
    18 });
    19 
    20 var $loading = AMUI.dialog.loading();
    21 setTimeout(function() {
    22     $loading.modal('close');
    23 }, 3000);
    24 
    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();
    39 
    40 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="stylesheethref="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'你的家还好吧', onConfirmfunction({ console.log('close')}); AMUI.dialog.confirm({ title'错误提示', content'正文内容', onConfirmfunction({ console.log('onConfirm')}, onCancelfunction({ 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>'], onSelectedfunction(index, target{ console.log(index); $actions.close()}); $actions.show(); AMUI.dialog.popup({title'标题', content'正文'});
     
  • 相关阅读:
    Swoole实战之手撸HttpServer框架 9 使用方法注解 注册路由
    Swoole实战之手撸HttpServer框架 10 利用Bean工厂雏形运行框架【里程碑】
    Markdown小册
    2.13
    12
    131
    1
    @vue/cli的配置知道多少publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap
    笔记本的常见分辨率
    vue/cli中css.sourceMapopeninlinehostporthttpsopenPagecompress devServer.proxy的简单介绍
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9581714.html
Copyright © 2020-2023  润新知