首页
核心
实例
资源
关于
v1.0

Drawer 抽屉

简介

抽屉插件所展示的效果是从屏幕四个方向抽拉效果，可实现多级抽拉，就有点像立式柜子一样。抽屉插件一般用于文字解释、旁白或者使用说明，一般不做复杂操作。

使用方法

插件运行方式有两种：

  • ax*属性：对按钮使用axDrawer属性，点击按钮即可按默认参数运行插件。
  • js实例：通过new axDrawer({参数})方式创建实例，通过点击事件运行该实例。
右侧抽屉（默认） 
                                <a href="###" class="ax-btn ax-primary" axDrawer='title:"伟大的中国",content:"#china"'>右侧抽屉（默认）</a>
                                <div id="china" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                </div>

异步内容

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

抽屉的尺寸

本框架定义了三种尺寸，对size属性使用sm、md或lg。默认是md。

  • sm 400px宽/高（默认）
  • md 600px宽/高
  • lg 70%宽/高
400px宽/高（默认） 600px宽/高 70%宽/高 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",size:"sm"'>400px宽/高（默认）</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",size:"md"'>600px宽/高</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",size:"lg"'>70%宽/高</a>
                                <div id="china" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                </div>

抽屉方位

本框架定义了四种方位，对placement属性使用left、right、top或bottom；默认是right。

  • right 右侧抽屉（默认）
  • left 左侧抽屉
  • top 上方抽屉
  • bottom 下方抽屉
右侧抽屉（默认） 左侧抽屉 上方抽屉 下方抽屉 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",placement:"right"'>右侧抽屉（默认）</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",placement:"left"'>左侧抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",placement:"top"'>上方抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",placement:"bottom"'>下方抽屉</a>
                                <div id="china" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                </div>

抽屉关闭

本框架弹窗的关闭方式有三种：一是点击侧边的关闭按钮；二是点击遮罩；三是自定义关闭按钮，在窗口中的按钮中添加close属性即可。

抽屉周围关闭按钮 点击遮罩关闭 自定义关闭按钮 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",overlayClose:false'>抽屉周围关闭按钮</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",close:false'>点击遮罩关闭</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#chinaClose"' >自定义关闭按钮</a>
                                <div id="china" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                </div>
                                <div id="chinaClose" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                <p><a href="###" class="ax-btn ax-primary" close>关闭</a></p>
                                </div>

抽屉按钮

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

  • center：实体按钮居中（默认）
  • right：左右结构，按钮居右
  • line：线性按钮铺满窗口底部
  • none：不留底部
注意，如果给属性写html代码会遇到单引号和双引号混合使用问题，有必要请使用转义符，单引号：'，双引号："。
左右结构 居中结构 线条按钮 图标按钮 
                                <a href="###" class="ax-btn ax-primary" axDrawer='footerType:"right",content:"#china",note:"你想了解更多么？"'>左右结构</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='footerType:"center",content:"#china"'>居中结构</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='footerType:"line",content:"#china"'>线条按钮</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='footerType:"line",content:"#china",confirm:{icon:"<i class='ax-iconfont ax-icon-seal'></i> "},cancel:{icon:"<i class='ax-iconfont ax-icon-slash-h'></i> "}'>图标按钮</a><div id="china" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                </div>

自定义按钮

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

  • diy:text：按钮文字
  • diy:icon：按钮图标，举例：<i class='ax-iconfont ax-icon-seal'></i>
  • diy:classname：按钮类名
  • diy:url：按钮链接，设置之后点击会条状到其他页面
  • diy:target：按钮页面打开方式，一般使用_blank或_self
  • diy:callback：回调函数，支持参数button，即按钮本身
自定义普通按钮 自定义居右按钮 自定义线性按钮 自定义按钮函数
HTML JS 
  •                                             <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"}'>自定义普通按钮</a>
                                            <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"},footerType:"right"'>自定义居右按钮</a>
                                            <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china",diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"},footerType:"line"'>自定义线性按钮</a>
                                            <a href="###" class="ax-btn ax-primary" id="diy">自定义按钮函数</a>
                                            <div id="china" style="display: none;">
                                            <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                            <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                            </div>
                                        
  •                                             document.querySelector("#diy").onclick = function(){
                                            new axDrawer({
                                            diy:{
                                            text:"自定义按钮",
                                            callback:function(){
                                            alert('自定义按钮执行函数！');
                                            }
                                            },
                                            title:'伟大的中国',
                                            content:'中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
                                            }).show();
                                            }

多媒体抽屉

根据不同的内容使用不同尺寸的抽屉。抽屉可容得下复杂的内容，包括表格、表单、文章、iframe等。

大段文字 多级菜单 大型表格 窗口搜索 iframe 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#media01"'>大段文字</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#media02",placement:"left",footerType:"none"'>多级菜单</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#media03",size:"lg"'>大型表格</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#media04",padding:false'>窗口搜索</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='type:"iframe",padding:false,url:"http://www.axui.cn"'>iframe</a>

                            <!--窗口-大段文字-->
                            <div id="media01" style="display: none;">
                                <div class="ax-article">
                                    <img src="https://src.axui.cn/v2.0/public/images/china01.jpg" />
                                    <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                    <p>　　<a href="###" class="ax-color-primary">中国</a>是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                    <video controls="controls">
                                        <source src="https://src.axui.cn/v2.0/public/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/public/media/audio.mp3" controls="controls">
                                        您的浏览器不支持播放该音频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                    </audio>
                                    <p>　　中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
                                    <p>　　中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
                                    <p>　　“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
                                </div>
                            </div>
                            <!--窗口-多级菜单-->
                            <div id="media02" style="display: none;">
                                <ul class="ax-menu ax-menu-light" axMenu>
                                    <li>
                                        <a href="###"><span class="ax-name">河北</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">石家庄</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                                <ul>
                                                    <li><a href="###"><span class="ax-name">长安区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">桥西区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">新华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">裕华区</span></a></li>
                                                    <li><a href="###"><span class="ax-name">井陉矿区</span></a></li>
                                                </ul>
                                            </li>
                                            <li><a href="###"><span class="ax-name">邢台</span></a></li>
                                            <li><a href="###"><span class="ax-name">邯郸</span></a></li>
                                            <li><a href="###"><span class="ax-name">保定</span></a></li>
                                            <li><a href="###"><span class="ax-name">衡水</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">四川</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">成都</span></a></li>
                                            <li><a href="###"><span class="ax-name">南充</span></a></li>
                                            <li><a href="###"><span class="ax-name">绵阳</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="###"><span class="ax-name">广西</span><span class="ax-arrow ax-iconfont ax-icon-right"></span></a>
                                        <ul>
                                            <li><a href="###"><span class="ax-name">南宁</span></a></li>
                                            <li><a href="###"><span class="ax-name">柳州</span></a></li>
                                        </ul>
                                    </li>

                                </ul>
                            </div>
                            <!--窗口-表格-->
                            <div id="media03" 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="media04" 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 class="ax-break-line"></div>
                                </div>
                            </div>

提交表单

表单使用方法请见：input。

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

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

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

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

前端校验提交表单 异步校验提交表单 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#form01",type:"form",confirm:{type:"submit"},padding:false'>前端校验提交表单</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#form02",type:"form",confirm:{type:"submit"},padding:false'>异步校验提交表单</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='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"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="name03" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="name04" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
                                </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"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
                                </div>
                                </div>
                                </div>
                                </form>

                                </div>
                                <!--窗口-表单2-->
                                <div id="form02" 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='url:"ajax/name.php"'></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"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="name03" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="name04" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
                                </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"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
                                </div>
                                </div>
                                </div>
                                </form>

                                </div>

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

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

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

异步提交表单 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#form03",type:"form",confirm:{type:"async",url:"ajax/login.php"},padding:false'>异步提交表单</a>
                                <!--窗口-表单3-->
                                <div id="form03" style="display: none">
                                <form>
                                <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='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"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="name03" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="name04" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
                                </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"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
                                </div>
                                </div>
                                </div>
                                </form>

                                </div>

多级抽屉

本框架的抽屉可使用多级抽屉，在抽屉内部按钮加上axDrawer属性，点击打开的抽屉即使二级抽屉。支持无限嵌套，自然形成多级抽屉效果。

右侧二级三级 左侧二级 顶部二级 底部二级 
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#multiRight"'>右侧二级三级</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#multiLeft",placement:"left"'>左侧二级</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#multiTop",placement:"top"'>顶部二级</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#multiBottom",placement:"bottom"'>底部二级</a>

                                <div id="multiRight" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                <div align="center">
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#level3"'>右侧打开二级抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"left",content:"#level3"'>左侧打开二级抽屉</a>
                                </div>
                                </div>
                                <div id="level3" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                <div align="center">
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#level4"'>右侧打开三级抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"left",content:"#level4"'>左侧打开三级抽屉</a>
                                </div>
                                </div>
                                <div id="level4" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                </div>
                                <div id="multiLeft" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                <div align="center">
                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#china"'>右侧打开二级抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"left",content:"#china"'>左侧打开二级抽屉</a>
                                </div>
                                </div>
                                <div id="multiTop" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                <div align="center">
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"top",content:"#china"'>上方打开二级抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"bottom",content:"#china"'>下方打开二级抽屉</a>
                                </div>
                                </div>
                                <div id="multiBottom" style="display: none;">
                                <p>　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
                                <p>　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
                                <div align="center">
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"top",content:"#china"'>上方打开二级抽屉</a>
                                <a href="###" class="ax-btn ax-primary" axDrawer='placement:"bottom",content:"#china"'>下方打开二级抽屉</a>
                                </div>
                                </div>

销毁实例

通过使用destroy方法更新销毁实例，有回调函数但无参数。

创建带实例 销毁
HTML JS 
  •                                             <a href="###" class="ax-btn ax-primary" id="destroy">创建带实例</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnDestroy">销毁</a>
                                        
  •                                             let instanceDestroy = new axDrawer({
                                            title: '伟大的中国',
                                            content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
                                            });
                                            document.querySelector("#destroy").onclick = function () {
                                            instanceDestroy.show();
                                            }
                                            document.querySelector("#btnDestroy").onclick = function () {
                                            instanceDestroy.destroy(function(){
                                            alert('销毁了实例！');
                                            });
                                            }

更新内容

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

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

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

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

更新参数

通过使用update方法更新插件参数。该方法有两个参数：

  • setting：将要更新的参数，格式：{name:value}
  • callback：回调函数，可不填

举例说明：更新Drawer显示标题，取消底部按钮。

装入内容 更新
HTML JS 
  •                                             <a href="###" class="ax-btn ax-primary" id="updateParas">装入内容</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnUpdate">更新</a>
                                        
  •                                             let newPara = new axDrawer({
                                            content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。'
                                            });
                                            document.querySelector("#updateParas").onclick = function () {
                                            newPara.show();
                                            }
                                            document.querySelector("#btnUpdate").onclick = function () {
                                            newPara.update({
                                            footerType: 'none',
                                            title: '伟大的中国',
                                            }, function (update, before, after) {
                                            if (update) {
                                            alert('更新了参数！');
                                            } else {
                                            alert('没有更新参数！');
                                            }
                                            }).show();
                                            }

监听事件

借鉴jQuery的写法，本插件有若干监听方法，格式是：instance.on('event',function(){})；具体事件说明如下：

  • show 抽屉开始打开执行
  • shown 抽屉打开后执行
  • hide 抽屉开始隐藏执行
  • hidden 抽屉隐藏后执行
  • update 内容/参数开始更新执行
  • updated 内容/参数更新后执行

演示实例使用console方法，请用F12打开浏览器控制台查看监听结果。

打开实例进行监听 监听updated
HTML JS 
  •                                             <a href="###" class="ax-btn ax-primary" id="ready">打开实例进行监听</a>
                                            <a href="###" class="ax-btn ax-primary" id="updated">监听updated</a>
                                        
  •                                             var instance = new axDrawer({
                                            title: '伟大的中国',
                                            content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。',
                                            });
                                            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('updated', function () {
                                            console.log('完成更新执行')
                                            }).on('hide', function () {
                                            console.log('关闭前执行')
                                            }).on('hidden', function () {
                                            console.log('关闭后执行')
                                            })

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                var demo1 = new axDrawer({
                                    title: '',//窗口标题，为空等于不显示
                                    titleBreak: true,//标题分割线，默认显示
                                    overlay: true,//默认显示半透明遮罩
                                    overlayClose: true,//点击遮罩是否关闭，默认可关闭
                                    placement: 'right',//抽屉的位置，默认在右侧，可填left|right|top|bottom
                                    size: 'sm',//窗口尺寸，默认小尺寸，可填sm|middle|large|full
                                    padding: 'ax-padding',//窗口内边距，值可以是布尔值也可以是类名，默认带边距，可填false|true|ax-padding|ax-padding ax-xxl|和其他
                                    offset: '100px', //子层抽屉偏移的基准距离
                                    content: '',//窗口内容，可填#id或html,
                                    type: 'html',//内容的类型，默认是html，可填iframe|async|html
                                    url: '',//内容的来源，该参数依赖type参数，除了html类型，其他几种类型均需要填入url，async的url可以是“地址+#id”
                                    btnClass: 'ax-drawer-open',//触发按钮在打开抽屉后新增的样式名
                                    close: true,//关闭窗口的按钮，默认显示
                                    footerType: 'center',//底部按钮风格，可选center,line,right
                                    footerShow: true,//是否显示底部，默认显示
                                    footerBreak: false,//底部分割线，默认不显示
                                    note: '',//其他内容
                                    ajaxType:'post',//异步提交的方式，默认post，可填get
                                    preventScroll:true,//当内容过长过多的时，在下滑内容时避免页面主滚动条也滚动，默认为true，可选择false
                                    confirm: {
                                        text: '确定',//确认按钮文字
                                        classname: '',//确认按钮的类名
                                        icon: '',//确认按钮的图标，格式是
                                        type:'close',//按钮类型，可选择close关闭、async异步提交表单、submit直接提交表单、prevent阻止按钮默认事件什么事也不做
                                        url: '',//提交的地址，如果type为async则必须使用该参数
                                        callback: ''//确认按钮的回调函数，最终按函数方式使用，格式是function(button,content){}，button是按钮节点，content是返回内容
                                    },
                                    cancel: {
                                        text: '关闭',//取消按钮文字
                                        classname: '',//取消按钮的类名
                                        icon: '',//取消按钮的图标
                                        callback: ''//取消按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
                                    },
                                    diy: {
                                        text: '',//自定义按钮文字
                                        classname: '',//自定义按钮的类名
                                        icon: '',//自定义按钮的图标
                                        url: '',//自定义按钮的超链接
                                        target: '',//自定义按钮的链接目标，一般是_blank或者_self
                                        callback: ''//自定义按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
                                    }

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
updateContent(html, callback) 更新内容 html是用户自定义内容；callback是回调函数，可不填 function(){}
无参数
update(setting, callback) 更新所有参数 setting是用户自定义参数，是一个对象；callback是回调函数，可不填 function(){}
无参数
destroy(callback) 销毁实例 callback是回调函数，可不填 function(){}
无参数
on(type, handler) 添加监听事件 type是监听事件，事件类型可看前文的：监听方法；handler是回调函数 function(){}
无参数
axInstance(axDrawer, name) 获取实例并重新设定参数 axDrawers是当页创建的所有实例；name是指插件元素axDrawer属性的name值 无回调函数
在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：
  • this：实例本身
  • this.targetDom：实例的Dom
  • this.options：实例的参数