Dialog 对话框

简单使用

对按钮使用axDialog属性,同时使用data-content属性即可实现一个简单的dialog弹窗。data-content可是文本或ID。

当然可以用JS参数创建窗口实例,而且在JS参数中的content不仅可以是文本、ID,也可以是函数。

  •                                 <a href="###"  class="ax-btn ax-primary" axDialog data-content="我是中国人">直接写上文本</a>
                                    <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text">通过id调取内容</a>
                                    <a href="###"  class="ax-btn ax-primary" id="js">从JS参数创建实例</a>
                                    <a href="###"  class="ax-btn ax-primary" id="func">从函数获得内容</a>
    
  •         document.querySelector("#js").onclick = function(){
                new axDialog({
                title:'伟大的中国',
                content:'中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。'
                 }).show();
            }
            document.querySelector("#func").onclick = function(){
                new axDialog({
                    content:function(){
                        let obj={ "country": "中国", "name": "CHINA", }
     							let html = '
      '; for(let k in obj){html+='
    • '+obj[k]+'
    • ';} html+='
    '; return html; } }).show(); }

异步内容

异步内容是指窗口内容通过ajax形式从同域的其他页面获取的内容,使用异步内容的方式有三种:
  • 1.使用data-type:'async'和data-url:''属性。填入页面地址即可获取该页面的html内容,比如:data-url="ajax/about.html"表示从about.html页面中获取所有html内容。
  • 2.使用data-type:'async'和data-url:''属性。使用格式url#id,比如:data-url="ajax/about.html#china"表示从about.html页面中id=china的标签中读取内容。
  • 3.使用js参数。必填type,url和content参数,其中content可用回调函数重新组织内容。回调函数有一个参数“data”,是异步内容。
  •                             <a href="###"  class="ax-btn ax-primary" axDialog data-asyncUrl="ajax/article.html">简单异步内容</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-asyncUrl="ajax/article.html#post02">从ID获取异步内容</a>
                                <a href="###"  class="ax-btn ax-primary" id="ajax">JS异步获取JSON</a>
    
  •         document.querySelector("#ajax").onclick = function(){
                new axDialog({
                    asyncUrl:'ajax/axui.json',
                    content:function(data){
     							let html = '
      '; for(let k in data){html+='
    • '+k+':'+data[k]+'
    • ';} html+='
    '; return html; } }).show(); }

更新内容

使用updateContent方法可更新窗口内容。updateContent的第一个值可以是“#id”,也可以是html字符串;第二个值是回调函数,可不填;其中回调函数有两个参数:

  • 第一个参数:更新之前的内容,可不填
  • 第二个参数:更新之后的内容,可不填

以下演示,第一次点击“装入内容”按钮将创建一个实例并打开;关闭之后再点击“更新内容”按钮将改变之前窗口的内容;再次点击“装入内容”按钮发现内容已经改变了。

  •                                 <a href="###"  class="ax-btn ax-primary" id="content">装入内容</a>
                                    <a href="###"  class="ax-btn ax-primary" id="update">更新内容</a>
    
  •         let newContent = new axDialog({
                title:'伟大的中国',
                content:'中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。'
            });
            document.querySelector("#content").onclick = function(){
                newContent.show();
            }
            document.querySelector("#update").onclick = function(){
                newContent.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。',function(){
                    alert('更新了内容!');
                })
            }
    

操作实例

使用axInstance的通用方法可打开指定名称的实例。通过这个方法可以对已创建的实例进行打开、销毁、修改参数和更新内容操作。

  • axInstance第一个参数:实例组,在弹窗插件中为axDialogs
  • axInstance第二个参数:按钮的name
  •                                 <a href="###"  class="ax-btn ax-primary" axDialog="dialog01" data-content="我是中国人">创建带id的实例</a>
                                    <a href="###"  class="ax-btn ax-primary" id="open">打开</a>
                                    <a href="###"  class="ax-btn ax-primary" id="openContent">更新内容并打开</a>
                                    <a href="###"  class="ax-btn ax-primary" id="openSet">修改参数并打开</a>
                                    <a href="###"  class="ax-btn ax-primary" id="destroy">销毁</a>
    
  •         document.querySelector('#open').onclick = function(){
                axInstance(axDialogs,'dialog01').show();
            }
            document.querySelector('#openContent').onclick = function(){
                axInstance(axDialogs,'dialog01').updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。').show();
            }
            document.querySelector('#openSet').onclick = function(){
                axInstance(axDialogs,'dialog01').update({
                    overlay:false,
                    drag:true,
                    title:'标题修改了!'
                },function(update,before,after){
                    if(update){
                        alert('更新了参数!');
                    }else{
                        alert('没有更新参数!');
                    }
                }).show();
            }
            document.querySelector('#destroy').onclick = function(){
                axInstance(axDialogs,'dialog01').destroy();
            }
    

结构变化

通过定义不同的data-*属性实现窗口dom结构变化。

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

                        <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text">使用标题</a>
                        <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text" data-titleBreak="true">使用标题分割线</a>
                        <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-overlay="false" >不要遮罩</a>
                                    

可拖拽窗口

当有窗口标题的时候可使用data-drag属性以实现拖拽窗口头部平移整个窗口。

                            <a href="###"  class="ax-btn ax-primary" axDialog data-drag="true" data-content="#text" data-title="伟大的中国">拖拽窗口</a>
                        

弹出和关闭动画

用户根据需要使用data-indata-out属性设定打开和关闭动画样式

  • data-in,打开动画,可选:fadeIn,fadeInUp,fadeInDown,slideDown,fadeInLeft,fadeInRight,springIn(默认),scaleIn等,更多详见动画页
  • data-out,关闭动画,可选:fadeOut,fadeOutUp,fadeOutDown,slideUp,fadeOutLeft,fadeOutRight,springOut,scaleOut(默认)等,更多详见动画页
这几个常用动画已经能满足大多数场景,用户可自行引入第三方动画库以实现更多的动画效果。
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国">弹簧(默认)</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="fadeIn" data-out="fadeOut">渐显渐隐</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="fadeInUp" data-out="fadeOutDown">向上渐显向下渐隐</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="fadeInDown"  data-out="fadeOutUp">向下渐显向上渐隐</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="fadeInLeft"  data-out="fadeOutRight">向左渐显向右渐隐</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="fadeInRight"  data-out="fadeOutLeft">向右渐显向左渐隐</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="scaleIn"  data-out="scaleOut">放大打开缩小关闭</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="springIn"  data-out="springOut">弹出弹回</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-title="伟大的中国" data-in="slideDown" data-out="slideUp">逐步显示逐步隐藏</a>
                                    

弹窗表单

配合使用data-paddingdata-titlebreakdata-footerType属性,将弹窗装入form表单元素,可适用所有风格的表单元素,并自适应手机。

本插件中确认按钮是放置在form标签之外,集成了两种提交方法。

第一种是同步提交。如果使用dialog装入表单,像普通表单那样页面跳转式提交表单,需要具备如下几个条件:

  • 1、当页隐藏表单内容,并且必须使用form元素包裹,通过content参数引用其ID
  • 2、type参数设置为form
  • 3、confirm的type参数设置为submit
  • 3、form元素必须设置action属性和method属性

点击确认按钮将首先执行axValidRepeat函数(函数用法),对表单内控件进行再次校验;如果全部通过将执行submit()事件以跳转的方式提交表单。

                        <a href="###" class="ax-btn ax-primary" axDialog data-content="#form01" data-type="form" data-confirm-type="submit" data-title="同步校验表单" data-padding="false" data-titleBreak="true" data-footerBreak="true" data-footerType="right">前端校验提交表单</a>
                        <a href="###" class="ax-btn ax-primary" axDialog data-content="#form02" data-type="form" data-confirm-type="submit" data-title="异步校验表单" data-padding="false" data-titleBreak="true" data-footerBreak="true" data-footerType="right">异步校验提交表单</a>
                            
                            
                        <!--窗口-表单1-->
                        <div id="form01" style="display:none">
                            <form action="https://www.axui.cn" method="post">
                                <div class="ax-emulate">
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">姓名:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="name01" placeholder="输入姓名" type="text" axValid data-type="required"></div>
                                            </div>
                                            <span class="ax-form-txt ax-color-des">必填校验</span>
                                        </div>
                                    </div>

                                    <div class="ax-break-line"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">籍贯:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-row">
                                                        <div class="ax-col ax-col-8"><input name="name02" placeholder="填写..." value="" type="text"></div>
                                                        <span class="ax-bunch-txt">省</span>
                                                        <div class="ax-col ax-col-8"><input name="name03" placeholder="填写..." value="" type="text"></div>
                                                        <span class="ax-bunch-txt">市</span>
                                                        <div class="ax-col ax-col-8"><input name="name04" placeholder="填写..." value="" type="text"></div>
                                                        <span class="ax-bunch-txt">区/县</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-line"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">头像:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="name05" placeholder="远程地址" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                            </div>
                                            <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/v2.0/public/images/head01.jpg),var(--load-gif);"></a><span class="ax-form-txt ax-color-des">李创江</span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--窗口-表单2-->
                        <div id="form02" style="display:none">
                            <form action="https://www.axui.cn" method="post">
                                <div class="ax-border-tel ax-radius-tel ax-margin ax-response-tel ">

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><span class="ax-pos-left" style="width:28px;"><i class="ax-iconfont ax-icon-me-f"></i></span><input name="username" placeholder="输入登录名称" type="text" axValid data-url="ajax/name.php"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                            </div>
                                            <span class="ax-form-txt ax-color-des">填“李雷”</span>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-hide-pad ax-hide-pc"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><span class="ax-pos-left" style="width:28px;"><i class="ax-iconfont ax-icon-lock-f"></i></span><input name="password" placeholder="输入密码" type="password"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md ax-hide-tel"></div>
                                    <div class="ax-break-line ax-hide-pad ax-hide-pc"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-row">
                                                        <div class="ax-flex-block"><span class="ax-pos-left" style="width:28px;"><i class="ax-iconfont ax-icon-shield-f"></i></span><input name="verify" placeholder="输入验证码..." value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
                                                        </div>
                                                        <a href="###" class="ax-form-img"><img src="https://src.axui.cn/v2.0/public/images/yanzhengma.jpg"></a>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </form>
                        </div>
                                            

第二种是异步提交。异步提交表单不需要跳转页面即可完成表单提交,是目前前端开发中比较常见的表单提交方式。异步提交表单需要具备如下几个条件:

  • 1、当页隐藏表单内容,并且必须使用form元素包裹,通过content参数引用其ID
  • 2、type参数设置为form
  • 3、confirm的type参数设置为asyn
  • 3、confirm的url参数设置为异步提交地址

点击确认按钮将首先执行axValidRepeat函数(函数用法),对表单内控件进行再次校验;如果全部通过将执行axAjaxSubmit函数(函数用法)以非跳转的方式提交表单。

                                                                <a href="###" class="ax-btn ax-primary" axDialog data-content="#form03" data-type="form" data-confirm-type="asyn" data-confirm-url="ajax/login.php" data-title="异步提交表单" data-padding="false" data-titleBreak="true" data-footerBreak="true" data-footerType="right">异步提交表单</a>
                                                                <form>
                                                                    <div class="ax-padding ax-outer-tel">
                                
                                                                        <div class="ax-form-group">
                                                                            <div class="ax-flex-row">
                                                                                <div class="ax-form-con">
                                                                                    <div class="ax-form-input">
                                                                                        <div class="ax-flex-row ax-form-origin">
                                                                                            <div class="ax-flex-block ax-title">账号</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">8</i>个文字</span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                
                                                                            </div>
                                                                            <div class="ax-flex-row">
                                                                                <div class="ax-form-con">
                                                                                    <div class="ax-form-input"><input name="username" placeholder="输入账号" type="text" axValid data-type="required"></div>
                                                                                </div>
                                                                                <span class="ax-form-txt ax-color-des">必填校验</span>
                                                                            </div>
                                                                        </div>
                                
                                
                                                                        <div class="ax-form-group">
                                                                            <div class="ax-flex-row">
                                                                                <div class="ax-form-con">
                                                                                    <div class="ax-form-input">
                                                                                        <div class="ax-flex-row ax-form-origin">
                                                                                            <div class="ax-flex-block ax-title">密码</div><span class="ax-color-ignore">忘记了密码?</span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="ax-flex-row">
                                                                                <div class="ax-form-con">
                                                                                    <div class="ax-form-input"><input name="username" placeholder="输入账号" type="password"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                
                                                                        <div class="ax-form-group">
                                                                            <div class="ax-flex-row">
                                                                                <div class="ax-form-con">
                                                                                    <div class="ax-form-input">
                                                                                        <div class="ax-flex-row ax-form-origin">
                                                                                            <div class="ax-flex-block ax-title">验证码</div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="ax-flex-row">
                                                                                <div class="ax-form-con">
                                                                                    <div class="ax-form-input">
                                                                                        <div class="ax-row">
                                                                                            <div class="ax-flex-block">
                                                                                                <input name="verify" placeholder="输入验证码..." value="" type="text">
                                                                                            </div>
                                                                                            <span class="ax-form-img"><a href="###">显示验证码</a></span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                
                                
                                                                    </div>
                                                                </form>
                                    

自定义弹窗关闭

本框架弹窗的关闭方式有四种:一是点击右上角的关闭按钮;二是点击遮罩;三是点击底部关闭按钮;三是自定义关闭按钮,在内容中对dom元素添加close"属性即可。

                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-overlay="false">右上角关闭按钮</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-close="false">点击遮罩关闭</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#diyClose" data-close="false" data-overlay="false">自定义关闭按钮</a>
                                <div id="diyClose" style="display:none">
                                    <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                    <a href="###" close class="ax-btn ax-primary">关闭窗口</a>
                                </div>
                                    

弹窗按钮

本框架的弹窗按钮有三种:一是居中结构,按钮都安排在中间排列,也是默认的按钮排列方式;二是左右结构,左侧文字,右侧按钮;三是底部线条按钮,简约风格。综合使用data-footerType属性,data-confirm-icon属性,data-confirm-icon属性和data-note属性可定义不同风格的底部按钮布局。

  • center:实体按钮居中(默认)
  • right:左右结构,按钮居右
  • line:线性按钮铺满窗口底部
  • none:不留底部
                        <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text">居中结构</a>
                        <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-footerType="right" data-note="你想了解更多么?">左右结构</a>
                        <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-footerType="line">线条按钮</a>
                        <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-footerType="line" data-confirm-icon="<i class='ax-iconfont ax-icon-seal'></i> " data-cancel-icon="<i class='ax-iconfont ax-icon-slash-h'></i> ">图标按钮</a>
                                    

窗口叠窗口

本插件可自动检测窗口中是否包含子窗口,子窗口弹出后将在父窗口的z-index值基础上自动+1,以确保永远浮在最前面。支持无限叠加。

                    <a href="###"  class="ax-btn ax-primary" axDialog data-content="#two">两层窗口</a>
                    <a href="###"  class="ax-btn ax-primary" axDialog data-content="#three">三层窗口</a>
                            
                    <div id="two" style="display:none;">
                    <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家。</p>
                    <a href="###" class="ax-btn" axDialog data-content="中国人民共和国万岁!" data-title="伟大的中国" data-titleBreak="true" data-drag="true">打开窗口</a>
                    </div>

                    <div id="three" style="display:none;">
                    <p>  通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                    <a href="###" class="ax-btn" axDialog data-content="#threeChild" data-title="伟大的中国" data-titleBreak="true" data-drag="true">打开窗口</a>
                    </div>
                    <div id="threeChild" style="display:none;">
                    <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                    <a href="###" class="ax-btn" axDialog data-content="全世界人民大团结万岁!" data-title="伟大的中国" data-titleBreak="true" data-drag="true">打开窗口</a>
                    </div>
                        

自定义按钮

除了常用的confirm确认按钮和cancel取消按钮之外,还可以创建一个自定义按钮;使用data-diy-*属性创建自定义按钮,具体参数如下:

  • data-diy-text:按钮文字
  • data-diy-icon:按钮图标,举例:<i class='ax-iconfont ax-icon-seal'></i>
  • data-diy-classname:按钮类名
  • data-diy-url:按钮链接,设置之后点击会条状到其他页面
  • data-diy-target:按钮页面打开方式,一般使用_blank或_self
  •                                 <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-diy-text="自定义按钮" data-diy-url="http://www.axui.cn" data-target="_blank">自定义普通按钮</a>
                                    <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-footerType="right" data-diy-text="自定义按钮" data-diy-url="http://www.axui.cn" data-target="_blank">自定义居右按钮</a>
                                    <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-footerType="line" data-diy-text="自定义按钮" data-diy-url="http://www.axui.cn" data-target="_blank">自定义线性按钮</a>
                                    <a href="###"  class="ax-btn ax-primary" id="diy">自定义按钮函数</a>
                                        
  •         document.querySelector("#diy").onclick = function(){
                new axDialog({
                diy:{
                        text:"自定义按钮",
                        callback:function(){
                            alert('自定义按钮执行函数!');
                        }
                    },
                title:'伟大的中国',
                content:'中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。'
                 }).show();
            }
                            

关闭按钮位置

在原插件基础上,本框架新增了关闭按钮的位置属性closePlace,参数如下:

  • inside 在窗口里,默认
  • outside 在窗口外侧右上角
  • bottom 在窗口外侧底部,圆形按钮
                                <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text">关闭按钮在里面</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text" data-closePlace="outside">关闭按钮在外面</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text" data-closePlace="bottom">关闭按钮在下方居中</a>
                                <div class="ax-break"></div>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text" data-overlay="false">关闭按钮在里面(无遮罩)</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text" data-closePlace="outside" data-overlay="false">关闭按钮在外面(无遮罩)</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-title="伟大的中国" data-content="#text" data-closePlace="bottom" data-overlay="false">关闭按钮在下方居中(无遮罩)</a>
                                

监听方法

借鉴jQuery的写法,本插件有若干监听方法,基本写法是:instance.on('show',function(){});具体事件说明如下:

  • drag 开始拖拽执行
  • dragged 拖拽完成执行
  • show 打开窗口前执行
  • shown 打开窗口后执行
  • hide 窗口隐藏前执行
  • hidden 窗口隐藏后执行
  • updated 内容更新后执行

演示实例使用console方法,请用F12打开开发者工具中的“控制台”查看监听效果:

  •                                 <a href="###"  class="ax-btn ax-primary" id="ready">打开实例进行监听</a>
                                    <a href="###"  class="ax-btn ax-primary" id="updated">监听updated</a>
                                        
  •         let instance = new axDialog({
                title:'伟大的中国',
                    content:'中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。',
                    drag:true,
                });
            document.querySelector("#ready").onclick = function(){
                instance.show();
            }
            document.querySelector("#updated").onclick = function(){
                instance.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。')
            }
            instance.on('show',function(){
                    console.log('开始打开执行')
                }).on('shown',function(){
                    console.log('已经打开执行')
                }).on('drag',function(){
                    console.log('拖拽开始执行')
                }).on('dragged',function(){
                    console.log('拖拽完成执行')
                }).on('updated',function(){
                    console.log('完成更新执行')
                }).on('hide',function(){
                    console.log('关闭前执行')
                }).on('hidden',function(){
                    console.log('关闭后执行')
                })
                              

弹窗尺寸

本框架定义了四种尺寸,对data-size属性使用smmdlg。默认是md

  • sm 宽300px
  • md 默认宽500px
  • lg 全宽
  • full 满屏
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-size="md">md默认500px</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-size="sm">sm300px</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-size="lg">lg全宽</a>
                                <a href="###"  class="ax-btn ax-primary" axDialog data-content="#text" data-size="full">full满屏</a>
                                    

多媒体弹窗

本插件不仅可以弹出纯文本,也可以弹出图片、视频、音频等多媒体文件。多媒体文件分别用各自的属性表示。

  • 使用data-type:'picture'和data-url属性表示显示一张图片,请填入一个图片地址。
  • 使用data-type:'video'和data-url属性表示显示一个视频,请填入一个视频地址。
  • 使用data-type:'audio'和data-url属性表示显示一个音频,请填入一个音频地址。
  • 使用data-type:'iframe'和data-url属性表示显示一个网址,请填入一个网址;使用iframe属性,请配合使用width、height和size属性。
  • data-name:媒体文件的名称。
                                    <a href="###" class="ax-btn ax-primary" axDialog data-content="#article">大段文字</a>
                                    <a href="###" class="ax-btn ax-primary" axDialog data-type="picture" data-url="https://src.axui.cn/v2.0/examples/images/china01.jpg" data-name="中国城市夜景" data-content="中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。">图片</a>
                                    <a href="###" class="ax-btn ax-primary" axDialog data-type="video" data-url="https://src.axui.cn/v2.0/examples/media/video.mp4" data-name="中国城市夜景" data-content="中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。">视频播放</a>
                                    <a href="###" class="ax-btn ax-primary" axDialog data-type="audio" data-url="https://src.axui.cn/v2.0/examples/media/audio.mp3" data-name="中国城市夜景" data-content="中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。">音频播放</a>
                                    <a href="###" class="ax-btn ax-primary" axDialog data-content="#table" data-size="lg">大型表格</a>
                                    <a href="###" class="ax-btn ax-primary" axDialog data-content="#search" data-footerType="line" data-padding="false">窗口搜索</a>
                                    <a href="###" class="ax-btn ax-primary" axDialog data-type="iframe" data-url="http://www.axui.cn" data-width="800px" data-height="400px" data-padding="false">iframe</a>
                                        
                                    <!--窗口-大段文字-->
                                    <div id="article" style="display:none;">
                                            <p>  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
                                            <p>  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p>
                                            <video controls="controls" >
                                                <source src="https://src.axui.cn/v2.0/examples/media/video.mp4" type="video/mp4">
                                                 您的浏览器不支持播放该视频,<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                            </video>
                                            <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                            <audio src="https://src.axui.cn/v2.0/examples/media/audio.mp3" controls="controls">
                                                您的浏览器不支持播放该音频,<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                            </audio>
                                            <p>  中国文化渊远流长、博大精深、绚烂多彩,是东亚文化圈的文化宗主国,在世界文化体系内占有重要地位,由于各地的地理位置、自然条件的差异,人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等,而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
                                            <p>  中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国,自之辟民”,同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
                                            <p>  “华夏”一词最早见于周朝《尚书·周书·武成》,“华夏蛮貊,罔不率俾”。 《书经》曰:“冕服采装曰华,大国曰夏”。《尚书正义》注:“冕服华章曰华,大国曰夏”。“华”,是指华丽、兴旺;也有说上古华、夏同音,本一字。《左传》曰:“中国有礼仪之大,故称夏;有服章之美,谓之华。”  华是指汉服,夏指行周礼的大国,故中国有礼仪之邦、衣冠上国之美誉。</p>
                                        </div>
                            
                                    <!--窗口-表格-->
                                    <div id="table" style="display:none;">
                                        <table class="ax-table">
                                            <thead>
                                            <tr>
                                                <th style="width: 240px;">情形</th>
                                                <th>描述</th>
                                                <th>回购和转让安排</th>
                                                <th style="width: 100px;">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td><div class="ax-align-left">1、激励对象主动解除劳动关系</div></td>
                                                <td><div class="ax-align-left">在劳动合同期内书面辞职</div></td>
                                                <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">6%</span>利息回购</div></td>
                                                <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
                                            </tr>
                                            <tr>
                                                <td><div class="ax-align-left">2、激励对象被解除劳动关系</div></td>
                                                <td><div class="ax-align-left">因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的</div></td>
                                                <td><div class="ax-align-left">按照原始出资价格回购,如果给公司造成损失,赔偿损失</div></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td><div class="ax-align-left">3、丧失劳动能力并终止劳动关系</div></td>
                                                <td><div class="ax-align-left">激励对象因伤病等非工伤的原因</div></td>
                                                <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">10%</span>的利息回购</div></td>
                                                <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
                                            </tr>
                                            <tr>
                                                <td><div class="ax-align-left">4、职务变更(仅限于高管)</div></td>
                                                <td><div class="ax-align-left">职务调整,按照“股随岗走”原则,依据公司的《岗位与激励股权确定细则》确定乙方的激励股权,相应增加或者减少</div></td>
                                                <td><div class="ax-align-left">增加激励股权按照新的激励对象处理;减少激励股权按照应减少的激励股权出资额加<span class="ax-color-danger">10%</span>利率回购</div></td>
                                                <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
                                            </tr>
                                            <tr>
                                                <td><div class="ax-align-left">5、退休</div></td>
                                                <td><div class="ax-align-left ax-more-ell">88退休且不签署《保密及竞业限制协议》</div></td>
                                                <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">12</span>%的利息回购</div></td>
                                                <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
                                            </tr>
                                            <tr>
                                                <td><div class="ax-align-left">6、死亡</div></td>
                                                <td><div class="ax-align-left">公司股份不能在公开市场自由转让的</div></td>
                                                <td><div class="ax-align-left">继承人与公司股东协商转让,如无人受让,则原始出资价格加每年<span class="ax-color-danger">12%</span>的利息回购</div></td>
                                                <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-f" title="编辑"></a></div></td>
                                            </tr>
                                            </tbody>
                                        </table>
    
                                    </div>
                                    <!--窗口-搜索-->
                                    <div id="search" style="display:none;">
                                        <div class="ax-break"></div>
                                        <div class="ax-padding-lr">
                                            <div class="ax-form-group">
                                                <div class="ax-row">
                                                    <div class="ax-col">
                                                        <input name="username" placeholder="输入关键字" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><a href="###" class="ax-iconfont ax-icon-search"></a></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <label class="ax-radio"><input name="group-select-house"  type="radio" value="1"><span>全选</span></label>
                                            <label class="ax-radio"><input name="group-select-house"  type="radio" value="0"><span>取消全选</span></label>
                                        </div>
    
                                        <div class="ax-break-line"></div>
    
                                        <div class="ax-list-select">
                                            <div class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div>
                                                    <label class="ax-checkbox ax-bone"><input name="house" value="2"  type="checkbox"><span></span></label>
                                                </div>
                                            </div>
                                            <div class="ax-break-line"></div>
                                            <div  class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div>
                                                    <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
                                                </div>
                                            </div>
                                            <div class="ax-break-line"></div>
                                            <div class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div>
                                                    <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
                                                </div>
                                            </div>
                                            <div class="ax-break-line"></div>
                                            <div class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div>
                                                    <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label>
                                                </div>
                                            </div>
                                            <div class="ax-break-line"></div>
                                            <div class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><span class="ax-ell">桂林漓江漂流</span></div>
                                                    <label class="ax-checkbox ax-bone"><input name="house" value="2" checked="" disabled type="checkbox"><span></span></label>
                                                </div>
                                            </div>
                                            <div class="ax-break-line"></div>
                                            <div class="ax-info-block">
                                                <div class="ax-row">
                                                    <div class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></div>
                                                    <label class="ax-checkbox ax-bone"><input name="house" value="2"  disabled  type="checkbox"><span></span></label>
                                                </div>
                                            </div>
    
                                        </div>
    
    
                                    </div>
                          

参数说明

            title: '',//窗口标题,为空等于不显示
            titleBreak: false,//标题分割线,默认不显示
            overlay: true,//默认显示半透明遮罩
            overlayClose: true,//点击遮罩是否关闭,默认可关闭
            in: 'springIn',//可填fadeIn,fadeInDown,fadeInUp,slideDown,fadeInLeft,fadeInRight,springIn,scaleIn
            out: 'scaleOut',//可填fadeOut,fadeOutDown,fadeOutUp,slideUp,fadeOutLeft,fadeOutRight,springOut,scaleOut
            multiple: true,//是否允许打开多个窗口,默认允许
            size: 'md',//窗口尺寸,默认正常尺寸,可填sm,middle,large,full
            padding: 'ax-padding',//窗口内边距,值可以是布尔值也可以是类名,默认带边距,可填false,true,ax-padding,ax-padding ax-xxl,...
            drag: false,//是否能拖拽,默认不可拖拽;注意如果title为空时即使drag为true也不能拖拽
            content: '',//窗口内容,可填#id或文本内容,
            type: 'html',//内容的类型,默认是html,可填picture|video|audio|iframe|async|html
            url: '',//内容的来源,该参数依赖type参数,除了html类型,其他几种类型均需要填入url,async的url可以是“地址+#id”
            name: '',//内容名称,当type是picture|video|audio时有效
            width: '',//内容宽度,当type是iframe的时候,有必要设置该参数,比如800px
            height: '',//内容高度,当type是iframe的时候,有必要设置该参数,比如400px,但是不要超过600px否则会产生垂直滚动条
            close: true,//关闭窗口的按钮,默认显示
            closePlace: 'inside',//可选 inside,bottom,outside
            footerShow: true,//是否显示底部,默认显示
            footerType: 'center',//底部按钮风格,可选center,line,right
            footerBreak: false,//底部分割线,默认不显示
            note: '',//其他内容
            confirm: {
                text: '确定',//确认按钮文字
                classname: '',//确认按钮的类名
                icon: '',//确认按钮的图标,格式是<i class="ax-iconfont ax-icon-edit">
                type: 'close',//按钮类型,可选择close关闭、async异步提交表单、submit直接提交表单
                url: '',//提交的地址,如果type为async则必须使用该参数
                callback: ''//确认按钮的回调函数,最终按函数方式使用,格式是function(){}
            },
            cancel: {
                text: '关闭',//取消按钮文字
                classname: '',//取消按钮的类名
                icon: '',//取消按钮的图标
                callback: ''//取消按钮的回调函数
            },
            diy: {
                text: '',//自定义按钮文字
                classname: '',//自定义按钮的类名
                icon: '',//自定义按钮的图标
                url: '',//自定义按钮的超链接
                target: '',//自定义按钮的链接目标,一般是_blank或者_self
                callback: ''//自定义按钮的回调函数
            }
  
如果在按钮中通过data-*使用属性,层级使用短横区分,比如要设置确定按钮的文字,那么在按钮的data属性中应该这样书写:data-confirm-text="OK"

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
update(setting, callback) 更新所有参数 setting是用户自定义参数,是一个对象;callback是回调函数,可不填 function(update,before,after){}
update是指判断是否更新,true或false,可不填;before是指更新之前的参数,可不填;after是指更新之后的参数,可不填。
updateContent(html, callback) 更新窗口内容 html是用户自定义内容,可以是字符串也可以是DOM的ID(#ID);callback是回调函数,可不填 function(update,before,after,origin){}
update是指判断是否更新,true或false,可不填;before是指更新之前的内容,可不填;after是指更新之后的内容,可不填;origin是指原始内容,可不填。
destroy(callback) 销毁实例 callback是回调函数,可不填 function(){}
无参数
show(callback) 打开实例窗口 callback是回调函数,可不填 function(){}
无参数
hide(callback) 关闭实例窗口 callback是回调函数,可不填 function(){}
无参数
on(type, handler) 监听实例 type是监听事件,具体可看前文的:监听方法;handler是回调函数 function(){}
无参数
axInstance(axDialogs, name) 获取实例 axDialogs是当页创建的所有实例;name是指插件元素axDialog属性的name值 无回调函数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:窗口的Dom
  • this.options:实例的参数
  • this.wrap:实例的窗口主体Dom
  • this.content:实例的内容主体Dom