Drawer 抽屉
简介
抽屉插件所展示的效果是从屏幕四个方向抽拉效果,可实现多级抽拉,就有点像立式柜子一样。抽屉插件一般用于文字解释、旁白或者使用说明,一般不做复杂操作。
使用方法
插件运行方式有两种:
- ax*属性:对按钮使用
axDrawer
属性,点击按钮即可按默认参数运行插件。 - js实例:通过
new axDrawer({参数})
方式创建实例,通过点击事件运行该实例。
<a href="###" class="ax-btn ax-primary" axDrawer data-title="伟大的中国" data-content="#china">右侧抽屉(默认)</a> <div id="china" style="display: none;"> <p> 中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p> </div>
异步内容
- 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" axDrawer data-type="async" data-url="ajax/article.html">简单异步内容</a> <a href="###" class="ax-btn ax-primary" axDrawer data-type="async" data-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+='
抽屉的尺寸
本框架定义了三种尺寸,对data-size
属性使用sm
、md
或lg
。默认是md
。
sm
400px宽/高(默认)md
600px宽/高lg
70%宽/高
<a href="###" class="ax-btn ax-primary" axDrawer data-size="sm" data-content="#china">400px宽/高(默认)</a> <a href="###" class="ax-btn ax-primary" axDrawer data-size="md" data-content="#china">600px宽/高</a> <a href="###" class="ax-btn ax-primary" axDrawer data-size="lg" data-content="#china">70%宽/高</a> <div id="china" style="display: none;"> <p> 中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p> </div>
抽屉方位
本框架定义了四种方位,对data-placement
属性使用left
、right
、top
或bottom
;默认是right
。
right
右侧抽屉(默认)left
左侧抽屉top
上方抽屉bottom
下方抽屉
<a href="###" class="ax-btn ax-primary" axDrawer data-placement="right" data-content="#china">右侧抽屉(默认)</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="left" data-content="#china">左侧抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="top" data-content="#china">上方抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="bottom" data-content="#china">下方抽屉</a> <div id="china" style="display: none;"> <p> 中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p> </div>
抽屉关闭
本框架弹窗的关闭方式有三种:一是点击侧边的关闭按钮;二是点击遮罩;三是自定义关闭按钮,在窗口中的按钮中添加close
属性即可。
<a href="###" class="ax-btn ax-primary" axDrawer data-overlayClose="false" data-content="#china">抽屉周围关闭按钮</a> <a href="###" class="ax-btn ax-primary" axDrawer data-close="false" data-content="#china">点击遮罩关闭</a> <a href="###" class="ax-btn ax-primary" axDrawer data-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>
抽屉按钮
本框架的弹窗按钮有三种:一是居中结构,按钮都安排在中间排列,也是默认的按钮排列方式;二是左右结构,左侧文字,右侧按钮;三是底部线条按钮,简约风格。综合使用data-footerType属性,data-confirm-icon属性,data-confirm-icon属性和data-note属性可定义不同风格的底部按钮布局。
- center:实体按钮居中(默认)
- right:左右结构,按钮居右
- line:线性按钮铺满窗口底部
- none:不留底部
<a href="###" class="ax-btn ax-primary" axDrawer data-footerType="right" data-content="#china" data-note="你想了解更多么?">左右结构</a> <a href="###" class="ax-btn ax-primary" axDrawer data-footerType="center" data-content="#china">居中结构</a> <a href="###" class="ax-btn ax-primary" axDrawer data-footerType="line" data-content="#china">线条按钮</a> <a href="###" class="ax-btn ax-primary" axDrawer data-footerType="line" data-content="#china" data-confirm-icon="<i class='ax-iconfont ax-icon-seal'></i> " data-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取消按钮之外,还可以创建一个自定义按钮;使用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" axDrawer data-content="#china" data-diy-text="自定义按钮" data-diy-url="http://www.axui.cn" data-target="_blank">自定义普通按钮</a> <a href="###" class="ax-btn ax-primary" axDrawer data-content="#china" data-footerType="right" data-diy-text="自定义按钮" data-diy-url="http://www.axui.cn" data-target="_blank">自定义居右按钮</a> <a href="###" class="ax-btn ax-primary" axDrawer data-content="#china" 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> <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等。
<a href="###" class="ax-btn ax-primary" axDrawer data-content="#media01">大段文字</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="left" data-footerType="none" data-content="#media02">多级菜单</a> <a href="###" class="ax-btn ax-primary" axDrawer data-size="lg" data-content="#media03">大型表格</a> <a href="###" class="ax-btn ax-primary" axDrawer data-padding="false" data-content="#media04">窗口搜索</a> <!--窗口-大段文字--> <div class="ax-drawer" id="media01"> <div class="ax-drawer-overlay"></div> <div class="ax-drawer-wrapper"> <div class="ax-drawer-body"> <div class="ax-padding 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> </div> <!--窗口-多级菜单--> <div class="ax-drawer" data-placement="left" id="media02"> <div class="ax-drawer-overlay"></div> <div class="ax-drawer-wrapper"> <div class="ax-drawer-body"> <ul class="ax-menu ax-menu-light" id="menu02"> <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> </div> <!--窗口-表格--> <div class="ax-drawer" data-size="lg" id="media03"> <div class="ax-drawer-overlay"></div> <div class="ax-drawer-wrapper"> <div class="ax-drawer-body"> <div class="ax-padding"> <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> </div> </div> <!--窗口-搜索--> <div class="ax-drawer" id="media04"> <div class="ax-drawer-overlay"></div> <div class="ax-drawer-wrapper"> <div class="ax-drawer-body"> <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> </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 data-content="#form01" data-type="form" data-confirm-type="submit" data-padding="false">前端校验提交表单</a> <a href="###" class="ax-btn ax-primary" axDrawer data-content="#form02" data-type="form" data-confirm-type="submit" data-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 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"><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 data-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
参数设置为asyn
- 3、confirm的
url
参数设置为异步提交地址
点击确认按钮将首先执行axValidRepeat
函数(函数用法),对表单内控件进行再次校验;如果全部通过将执行axAjaxSubmit
函数(函数用法)以非跳转的方式提交表单。
<a href="###" class="ax-btn ax-primary" axDrawer data-content="#form03" data-type="form" data-confirm-type="asyn" data-confirm-url="ajax/login.php" data-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 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"><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 data-content="#multiRight">右侧二级三级</a> <a href="###" class="ax-btn ax-primary" axDrawer data-content="#multiLeft" data-placement="left">左侧二级</a> <a href="###" class="ax-btn ax-primary" axDrawer data-content="#multiTop" data-placement="top">顶部二级</a> <a href="###" class="ax-btn ax-primary" axDrawer data-content="#multiBottom" data-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 data-content="#level3">右侧打开二级抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="left" data-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 data-content="#level4">右侧打开三级抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="left" data-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 data-content="#china">右侧打开二级抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="left" data-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 data-placement="top" data-content="#china">上方打开二级抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="bottom" data-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 data-placement="top" data-content="#china">上方打开二级抽屉</a> <a href="###" class="ax-btn ax-primary" axDrawer data-placement="bottom" data-content="#china">下方打开二级抽屉</a> </div> </div> <div id="china" style="display: none;"> <p> 中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。</p> </div>
销毁实例
通过使用destroy
方法更新销毁实例,有回调函数但无参数。
-
<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字符串;第二个值是回调函数,可不填;其中回调函数有两个参数:
- 第一个参数:更新之前的内容,可不填
- 第二个参数:更新之后的内容,可不填
以下演示,第一次点击“装入内容”按钮将创建一个实例并打开;关闭之后再点击“更新内容”按钮将改变之前窗口的内容;再次点击“装入内容”按钮发现内容已经改变了。
-
<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显示标题,取消底部按钮。
-
<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打开浏览器控制台查看监听结果。
-
<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” close: true,//关闭窗口的按钮,默认显示 footerType: 'center',//底部按钮风格,可选center,line,right footerShow: true,//是否显示底部,默认显示 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: ''//自定义按钮的回调函数 } }); });
2、本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。
操作方法
名称 | 说明 | 参数说明 | 回调函数 |
---|---|---|---|
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.targetDom:实例的Dom
- this.options:实例的参数