Drawer 抽屉

                                            <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();
                                            }
                                        

                                            <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();
                                            }
                                        

                                <a href="###" class="ax-btn ax-primary" axDrawer='content:"#media01"'>大段文字</a>
                                <a href="###" class="ax-btn ax-primary" id="menuDrawer">多级菜单</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" id='menu' axMenu>
                                    <li>
                                        <div><i label>河北</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
                                        <ul>
                                            <li>
                                                <div><i label>邢台</i></div>
                                            </li>
                                            <li>
                                                <div><i label>邯郸</i></div>
                                            </li>
                                            <li>
                                                <div><i label>保定</i></div>
                                            </li>
                                            <li>
                                                <div><i label>衡水</i></div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div><i label>四川</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
                                        <ul>
                                            <li>
                                                <div><i label>成都</i></div>
                                            </li>
                                            <li>
                                                <div><i label>南充</i></div>
                                            </li>
                                            <li>
                                                <div><i label>绵阳</i></div>
                                            </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>
                            
                            

                                            let menuDrawer = new axDrawer({
                                                content: document.querySelector('#menu'),
                                                placement: 'left',
                                                footerShow: false
                                            });
                                            document.querySelector("#menuDrawer").onclick = () => {
                                                menuDrawer.show();
                                            }
                                        

                                            <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('更新了内容！');
                                            })
                                            }
                                        

                                            <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();
                                            }
                                        

                                            <a href="###" class="ax-btn ax-primary" id="insDestroy">将要销毁的</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnReturn">再次启用</a>
                                        

                                            let insDestroy = new axDrawer({ content: '伟大的中国' }, '#insDestroy'),
                                                btnDestroy = document.querySelector('#btnDestroy'),
                                                btnReturn = document.querySelector('#btnReturn');
                                            btnDestroy.onclick = function () {
                                                insDestroy.destroy(function () {
                                                    alert('销毁了实例！')
                                                });
                                            }
                                            btnReturn.onclick = function () {
                                                insDestroy.init();
                                            }
                                        

                                    <a href="###" class="ax-btn ax-primary" axDrawer='insName:"big",content:"big实例"'>name='big'的实例</a>
                                    <a href="###" class="ax-btn ax-primary" axDrawer='insName:"small",content:"small实例"'>name='small'的实例</a>
                                    <a href="###" class="ax-btn ax-primary" id="destroyBig">销毁big实例</a>
                                    <a href="###" class="ax-btn ax-primary" id="destroySmall">销毁small实例</a>
                                    <a href="###" class="ax-btn ax-primary" id="viewAll">查看实例合集</a>
                                    <a href="###" class="ax-btn ax-primary" id="returnAll">重新启用</a>
                                        

                                            let destroyBig = document.querySelector('#destroyBig'),
                                                destroySmall = document.querySelector('#destroySmall'),
                                                viewAll = document.querySelector('#viewAll'),
                                                returnAll = document.querySelector('#returnAll');
                                            destroyBig.onclick = function () {
                                                axInstance.destroy('big');
                                            }
                                            destroySmall.onclick = function () {
                                                axInstance.destroy('small');
                                            }
                                            viewAll.onclick = function () {
                                                //只查看有name的实例合集
                                                console.log(axInstance.data.filter(i => i.name && i.type === 'drawer'));
                                            }
                                            returnAll.onclick = function () {
                                                //重新初始化以启用
                                                let items = axInstance.data.filter(i => (i.name === 'big' || i.name === 'small') && i.type === 'drawer');
                                                items.forEach(i => {
                                                    i.instance.init();
                                                });
                                            }
                                        

                                    <a href="###" class="ax-btn ax-primary" axDrawer='insName:"ins01",content:"我是中国人"'>创建带name的实例</a>
                                    <a href="###" class="ax-btn ax-primary" id="nameOpen">打开</a>
                                    <a href="###" class="ax-btn ax-primary" id="nameContent">更新内容并打开</a>
                                    <a href="###" class="ax-btn ax-primary" id="nameSet">修改参数并打开</a>
                                    <a href="###" class="ax-btn ax-primary" id="nameDestroy">销毁</a>
                                    <a href="###" class="ax-btn ax-primary" id="nameReturn">重新启用</a>
                                        

                                        let nameIns = axInstance.find('ins01'),
                                            nameOpen = document.querySelector('#nameOpen'),
                                            nameContent = document.querySelector('#nameContent'),
                                            nameSet = document.querySelector('#nameSet'),
                                            nameDestroy = document.querySelector('#nameDestroy'),
                                            nameReturn = document.querySelector('#nameReturn');
                                        nameOpen.onclick = function () {
                                            nameIns.show();
                                        }
                                        nameContent.onclick = function () {
                                            nameIns.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。').show();
                                        }
                                        nameDestroy.onclick = function () {
                                            nameIns.destroy();
                                        }
                                        nameSet.onclick = function () {
                                            nameIns.update({
                                                title: '标题修改了！'
                                            }, function (update, before, after) {
                                                if (update) {
                                                    alert('更新了参数！');
                                                } else {
                                                    alert('没有更新参数！');
                                                }
                                            }).show();
                                        }
                                        nameReturn.onclick = function () {
                                            nameIns.init();
                                        }
                                        

                                            <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('关闭后执行')
                                            })