Accordion 折叠面板
特点
accordion这点面板是目前系统开发和网站建设中最常用的内容堆叠方式；AXUI秉着即能快速应用又能满足自定义风格的要求，开发了axAccordion插件，其特点如下：
- 1、多种创建实例的方式，既支持现有节点创建实例，又支持对象数组创建实例，还支持异步json创建实例
- 2、支持从其他页面异步获取内容
- 3、支持自定义头部标题风格
- 4、支持追加子项和删除子项
- 5、支持本地存储数据，刷新后自动还原
- 6、支持保持当前焦点项索引，刷新后自动还原
- 7、支持子项无限嵌套
- 8、支持与ax-border、ax-shadow和ax-radius配合使用，创造更多个性风格
基本结构
创建折叠面板需要有固定的DOM结构，外层节点必须有ax-accordion类（如果没有，插件会自动加上），另外还必须有header节点、body节点、content节点和label节点：
.ax-accordion-header：该节点用来存放标题，点缀图标，文字提示和指示箭头.ax-accordion-body：该节点用来存放content内容节点，并在此节点上滑和下滑.ax-accordion-content：该节点用来存放内容label：该节点用来存放标题
除以上必要节点之外，还有一些可选节点：
arrow：该节点是指示箭头，随着内容节点上滑和下滑而变化tip：该节点用来存放tip内容，内容呈灰色legend：该节点用来存放标题前的点缀图标flex：该节点用来存放label节点和其他内容，可让header实现内容伸缩
-
标题1内容1。
-
标题2内容2。
-
标题3内容3。
-
标题1内容1。
-
标题2点击查看更多内容2。
-
标题3点击查看更多内容3。
<ul class="ax-accordion" axAccordion>
<li>
<div class="ax-accordion-header"><i label>标题1</i></div>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容1。</div>
</div>
</li>
<li>
<div class="ax-accordion-header"><i label>标题2</i></div>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容2。</div>
</div>
</li>
<li>
<div class="ax-accordion-header"><i label>标题3</i></div>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容3。</div>
</div>
</li>
</ul>
<div class="ax-break"></div>
<div class="ax-break"></div>
<ul class="ax-accordion" axAccordion>
<li>
<div class="ax-accordion-header">
<i class="ax-iconfont ax-icon-star" legend></i>
<div flex><i label>标题1</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容1。</div>
</div>
</li>
<li>
<div class="ax-accordion-header">
<div flex><i label>标题2</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容2。</div>
</div>
</li>
<li>
<div class="ax-accordion-header">
<i class="ax-iconfont ax-icon-up" arrow></i>
<div flex><i label>标题3</i></div>
<i tip>点击查看更多</i>
</div>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容3。</div>
</div>
</li>
</ul>
美化结构
以上示例已经展示了accordion的所有节点，但是实际上是简陋的，用户可根据需要加上边框、圆角、阴影和分割线，如下述示例。
-
标题1点击查看更多
内容1。
-
标题2点击查看更多
内容2。
-
标题3点击查看更多
内容3。
<ul class="ax-accordion ax-border ax-radius ax-shadow" axAccordion>
<li>
<div class="ax-accordion-header">
<i class="ax-iconfont ax-icon-gift-f" legend></i>
<div flex><i label>标题1</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容1。</div>
<hr/>
</div>
</li>
<li>
<div class="ax-accordion-header">
<i class="ax-iconfont ax-icon-umbrella-f" legend></i>
<div flex><i label>标题2</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容2。</div>
<hr/>
</div>
</li>
<li>
<div class="ax-accordion-header">
<i class="ax-iconfont ax-icon-org-f" legend></i>
<div flex><i label>标题3</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容3。</div>
</div>
</li>
</ul>
初始化
对子节点使用active属性可初始化后展开内容；对子节点使用disabled可禁止鼠标事件。
-
标题1点击查看更多
内容1。
-
标题2点击查看更多
内容2。
-
标题3点击查看更多
内容3。
<ul class="ax-accordion" axAccordion>
<li>
<div class="ax-accordion-header">
<div flex><i label>标题1</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容1。</div>
<hr/>
</div>
</li>
<li active>
<div class="ax-accordion-header">
<div flex><i label>标题2</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容2。</div>
<hr/>
</div>
</li>
<li disabled>
<div class="ax-accordion-header">
<div flex><i label>标题3</i><i tip>点击查看更多</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">内容3。</div>
</div>
</li>
</ul>
嵌套
在ax-accordion-content节点或ax-accordion-body节点内放置其他ax-accordion节点便可简单嵌套使用。
-
中华民族
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
-
历史进程
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。-
中华人民共和国的成立
1949年10月1日中华人民共和国的成立，标志着中国进入了人民当家作主的新时期。
-
第三次国内革命战争
1945年8月至1949年10月是第三次国内革命战争时期。第三次国内革命战争是中国人民在中国共产党领导下反对国民党反动派的战争。
-
抗日战争
1937年7月7日，日军进攻卢沟桥，中国军队奋起还击，全国抗日战争的序幕由此揭开。8月13日，日军进攻上海，国民政府被迫对日作战。
-
-
人口规模
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
<ul class="ax-border" axAccordion>
<li>
<div class="ax-accordion-header">
<div flex><i label>中华民族</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</div>
<hr/>
</div>
</li>
<li active>
<div class="ax-accordion-header">
<div flex><i label>历史进程</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
<!-- -->
<div class="ax-break"></div>
<ul class="ax-border" axAccordion>
<li>
<div class="ax-accordion-header">
<div flex><i label>中华人民共和国的成立</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">1949年10月1日中华人民共和国的成立，标志着中国进入了人民当家作主的新时期。</div>
<hr/>
</div>
</li>
<li>
<div class="ax-accordion-header">
<div flex><i label>第三次国内革命战争</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">1945年8月至1949年10月是第三次国内革命战争时期。第三次国内革命战争是中国人民在中国共产党领导下反对国民党反动派的战争。</div>
<hr/>
</div>
</li>
<li>
<div class="ax-accordion-header">
<div flex><i label>抗日战争</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">1937年7月7日，日军进攻卢沟桥，中国军队奋起还击，全国抗日战争的序幕由此揭开。8月13日，日军进攻上海，国民政府被迫对日作战。</div>
</div>
</li>
</ul>
<!-- -->
</div>
<hr/>
</div>
</li>
<li>
<div class="ax-accordion-header">
<div flex><i label>人口规模</i></div>
<i class="ax-iconfont ax-icon-up" arrow></i>
</div>
<hr/>
<div class="ax-accordion-body">
<div class="ax-accordion-content">中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</div>
</div>
</li>
</ul>
数据源
以上示例是以现有物理节点创建accordion来展示的，数据源除了物理节点之外，通过设置content参数可使用更多数据源。
参数content通常是一个数组，完整的格式如content:[{label:'',content:'',legend:'',active:true,disabled:false,type:'url'},{}...]，属性说明
- label：一个子项的标题，HTML文本格式，可以填入图标字符串
active：当前子项的焦点状态，如果需要让某个子项成为焦点可设为truedisabled：当前子项的禁用状态，如果需要禁用某个子项（不可点击展开和关闭）可将值设为false，整个数组中允许多个子项设为truetype：设置当前子项的内容类型，默认为undefined，可设置url、async或node- 如果设为url表示子项是一个内嵌网页；
- 如果设为async表示子项将从其他页面异步获取内容；
- 如果设为node表示子项将从页面获取节点作为内容；
content：设置子项的内容，可使用多种格式，其他的可以是HTML文本或DOM节点
如果需要从json异步读取数组内容，那么content应该填写json的地址，json的格式如上。
将页面中的数组作为数据源
将同源的json文件作为数据源
将非同源的网址作为数据源
将节点内容作为数据源（appendChild方法，不影响节点原本的操作）
-
<h5>将页面中的数组作为数据源</h5> <div class="ax-accordion" id="dataArr"></div> <div class="ax-break"></div> <h5>将同源的json文件作为数据源</h5> <div class="ax-accordion" id="dataAsync"></div> <div class="ax-break"></div> <h5>将非同源的网址作为数据源</h5> <div class="ax-accordion" id="dataIfa"></div> <div class="ax-break"></div> <h5>将节点内容作为数据源（appendChild方法，不影响节点原本的操作）</h5> <div class="ax-accordion" id="dataDom"></div> <div style="display: none;"> <div id="dom01">内容1</div> <div id="dom02">内容2</div> <div id="dom03">内容3</div> </div> -
new axAccordion('#dataArr', { content: [ { label: '标题1', content: '内容1', active: true, }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, ] }); new axAccordion('#dataAsync', { content: 'ajax/china.json', }); new axAccordion('#dataIfa', { content: [ { label: 'AXUI首页', content: 'https://www.axui.cn/', active: true, type:'url', }, { label: 'AXUI概述', content: 'https://www.axui.cn/v2.0/ax-index.php', type:'url', }, { label: 'AXUI实例', content: 'https://www.axui.cn/demo.php', type:'url', }, ], }); new axAccordion('#dataDom', { content: [ { label: '标题1', content: document.querySelector('#dom01'), active: true, }, { label: '标题2', content: document.querySelector('#dom02'), }, { label: '标题3', content: document.querySelector('#dom03'), }, ], }); -
[ { "label": "自然环境", "content": "中国位于亚洲东部，太平洋西岸。北起漠河附近的黑龙江江心，南到南沙群岛的曾母暗沙。西起帕米尔高原，东至黑龙江、乌苏里江汇合处。陆地面积960万平方千米，陆上边界2万多千米。" }, { "label": "行政区划", "content": "截至2020年底，中国共有34个省级行政区（包括23个省、5个自治区、4个直辖市、2个特别行政区）、333个地级行政区、2844个县级行政区、38741个乡级行政区。北京是中国的首都。" }, { "label": "人口", "content": "全国总人口为1443497378人，其中：普查登记的大陆31个省、自治区、直辖市和现役军人的人口共1411778724人；香港特别行政区人口为7474200人；澳门特别行政区人口为683218人；台湾地区人口为23561236人。" }, { "label": "饮食", "content": "经过千年的发展独自形成了中国饮食文化，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中国人民在生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。" } ]
综合数据源
以上示例已经演示了所有数据源情况，那么这些数据源是可以混合使用，请观摩以下示例。
综合数据源01
综合数据源02（异步）
-
<h5>将页面中的数组作为数据源</h5> <div class="ax-accordion" id="dataArr"></div> <div class="ax-break"></div> <h5>将同源的json文件作为数据源</h5> <div class="ax-accordion" id="dataAsync"></div> <div class="ax-break"></div> <h5>将非同源的网址作为数据源</h5> <div class="ax-accordion" id="dataIfa"></div> -
new axAccordion('#dataMore01', { content: [ { label: '文本标题', content: '文本内容', active: true, }, { label: 'dom节点', content: document.querySelector('#dom04'), }, { label: 'iframe网页', content: 'https://www.axui.cn/', type: 'url', }, { label: '异步内容', content: 'ajax/world.html#China', type: 'async', }, ], }); new axAccordion('#dataMore02', { content: 'ajax/tabAsync.json' }); -
[ { "label": "文本标题", "content": "文本内容" }, { "label": "dom节点", "content": "#dom05" }, { "label": "iframe网页", "content": "https://www.axui.cn/", "type": "url" }, { "label": "异步内容", "content": "ajax/world.html#China", "type": "async" } ]
指示箭头
arrow参数可设置指示箭头的图标、旋转角度和所在位置。通过arrow.enable设为true开启使用指示箭头。
指示箭头在展开时默认会旋转180度，可以通过arrow.rotate设置90则会旋转90度，当然此时arrow.iconClose应该填ax-icon-right；如果将arrow.rotate设为0表示不再旋转而改为切换iconClose/iconOpen图标，此时的两个图标应该不同。
指示箭头默认会放在标题行尾部，即arrow.position默认为end，可设为begin，此时指示箭头会放在标题行最前方。
-
<div id="rotate90Ins" class="ax-border"></div> <div class="ax-break"></div> <div id="rotate0Ins" class="ax-border"></div> <div class="ax-break"></div> <div id="beginIns" class="ax-border"></div> -
new axAccordion('#rotate90Ins', { arrow: { rotate: 90, iconClose: 'ax-icon-right', }, content: [ { label: '标题1', content: '内容1', }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, ], }); new axAccordion('#rotate0Ins', { arrow: { rotate: 0, iconClose: 'ax-icon-plus-s', iconOpen: 'ax-icon-minus-s', }, content: [ { label: '标题1', content: '内容1', }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, ], });
提示
在content参数中可设置tip值，默认是放在label后方，可通过tipPosition参数将提示文字放在标题行末尾。
-
<div id="tipStartIns" class="ax-border"></div> <div class="ax-break"></div> <div id="tipEndIns" class="ax-border"></div> -
new axAccordion('#tipStartIns', { content: [ { label: '标题1', content: '内容1', tip:'项目简介' }, { label: '标题2', content: '内容2', tip:'项目简介' }, { label: '标题3', content: '内容3', tip:'项目简介' }, ], }); new axAccordion('#tipEndIns', { tipPosition:'end', content: [ { label: '标题1', content: '内容1', tip:'项目简介' }, { label: '标题2', content: '内容2', tip:'项目简介' }, { label: '标题3', content: '内容3', tip:'项目简介' }, ], });
图例
在content参数中可设置legend值，将在标题前显示一个图例，legend值是一个或多个class类。
-
<div id="legendIns" class="ax-border"></div> -
new axAccordion('#legendIns', { content: [ { label: '标题1', content: '内容1', legend:'ax-icon-people-f' }, { label: '标题2', content: '内容2', legend:'ax-icon-settings-f' }, { label: '标题3', content: '内容3', legend:'ax-icon-clock-f' }, ], });
风格饱满
结合以上示例演示所使用的方法，再加上插件中能改变风格的参数可创造独具个性的accordion。
以下示例使用监听方法，确保最后一项的分割线不会超出圆角区域。
-
<div id="styleIns" class="ax-border"></div> -
let styleIns = new axAccordion('#styleIns', { borderShow: true, targetClass: 'ax-shadow ax-radius-md', onInit:function(){ let item = this.data[this.data.length - 1]; if(!item.active){ item.headerBreakDom.style.display = 'none'; } }, onCollapsed: function (item) { if (item === this.data[this.data.length - 1]) { item.headerBreakDom.style.display = 'none'; } }, onExpand: function (item) { if (item === this.data[this.data.length - 1]) { item.headerBreakDom.style.display = 'block'; } }, content: [ { label: '中华民族', content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。', legend: 'ax-icon-star-f ax-color-question', tip: '五十六个民族', }, { label: '历史进程', content: '中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。', legend: 'ax-icon-tags-f ax-color-warning', tip: '上下五千年', }, { label: '人口规模', content: '中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。', legend: 'ax-icon-flash-f ax-color-error', tip: '世界之最', }, ], });
激活和禁用
设置激活和禁用都有两个方法，一是在content参数中对某一项或某几项设置active:true和disabled:true；二是通过插件参数active和disabled设置。
-
<div id="activeIns"></div> -
new axAccordion('#activeIns', { active:1,//如果是数字那么是索引；如果是字符串那么就是label更多用法请查看active参数 content: [ { label: '中华民族', content: '中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。', disabled:true, }, { label: '历史进程', content: '中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。', }, { label: '人口规模', content: '中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。', }, ], });
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.data：是一个数组，输出当前accordion的完整数据，包含的属性如下：- label：标题，支持HTML文本
- content：内容，视type类型而定
- type：内容类型，有text（默认）、node、url、asnyc四种类型
- active：是否为激活项（焦点项）
- disabled：是否禁用，启用则设为true
- props：项目节点的其他属性，比如props:{id:'demo'}表示给wrapperDom追加id=demo属性
- headerDom：标题行节点
- labelDom：标题节点
- bodyDom：内容行节点
- contentDom：内容详细节点
- flexDom：标题外容器节点，该节点可撑开标题行
- wrapperDom：项目节点
- headerBreakDom：标题分割线节点（标题行下方）
- bodyBreakDom：内容分割线节点（内容行下方）
this.targetDom：ax-accordion节点this.destroyed：销毁状态
内部操作方法如下：
this.add(items,callback)：添加一个子项或多个子项，参数说明如下：- items：支持对象或数组，数组项属性有：label、content、type、active和disabled
- callback：回调函数，支持一个参数即添加的子项
this.expand(item,callback)：激活一个子项（成为焦点），参数说明如下：- item：支持多种数据类型；如果是一个数字则找到对应索引的子项并激活；如果是一个字符串则找到对应的标题文本子项并激活；如果是一个Dom节点则找到对应的标题节点子项并激活；如果是一个对象则从this.data中找到对应项并激活
- callback：回调函数，支持一个参数即当前激活项
this.collapse(item,callback)：折叠一项，支持两个参数：- item：与active方法的item参数一致
- callback：回调函数，无参数
this.remove(items,callback)：删除一个子项或多个子项，参数说明如下：- items：支持多种数据类型；如果是一个数字则找到对应索引的子项并删掉；如果是一个字符串则找到对应的标题文本子项并删掉；如果是一个Dom节点则找到对应的标题节点子项并删掉；如果是一个对象则从this.data中找到对应项并删掉；可以是一个数组，数组项格式前所述
- callback：回调函数，无参数
this.disable(items,callback)：禁用一个子项或多个子项，禁用后将不可点击，参数说明如下：- items：支持多种数据类型；如果是一个数字则找到对应索引的子项并删掉；如果是一个字符串则找到对应的标题文本子项并删掉；如果是一个Dom节点则找到对应的标题节点子项并删掉；如果是一个对象则从this.data中找到对应项并删掉；可以是一个数组，数组项格式前所述
- callback：回调函数，无参数
this.enable(items,callback)：启用一个子项或多个子项，参数说明如下：- items：同disable的items参数
- callback：回调函数，无参数
this.disableAll(callback)：禁用全部子项，支持回调函数，回调函数无参数this.enableAll(callback)：启用全部子项，支持回调函数，回调函数无参数this.update(setting,callback)：更新参数并重新渲染节点，参数说明如下：- setting：将要更新的参数
- callback：回调函数，无参数
this.updateContent(item,content,callback)：更新一个子项的内容，参数说明如下：- item：与active方法的item参数一致
- content：更新的内容，具体格式视该子项的type类型而定，如果不填则表示从当前的this.data变量中更新（可能没有任何变化）
- callback：回调函数，无参数
this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前active、disabled和content的状态
- 对象格式，比如setting={headerClass:'ax-btn-group',closable:true}
- callback：回调函数，支持一个参数即localstorage值：
this.getActive()：获得当前的焦点项，返回焦点对象，无参数this.getDisabled()：获得当前的禁用项，返回一个数组，无参数this.expandAll(callback)：全部展开（前提是multiple为true），支持回调函数，无参数this.collapseAll(callback)：全部折叠，支持回调函数，无参数
-
<div class="ax-accordion" id="mIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="mAdd">增加一个子项</a> <a href="###" class="ax-btn" id="mRemove">删除第二个子项</a> <a href="###" class="ax-btn" id="mUpdateItem">更新第三子项的内容</a> <a href="###" class="ax-btn" id="mUpdate">更新参数</a> <a href="###" class="ax-btn" id="mActive">第三个子项成为焦点</a> <a href="###" class="ax-btn" id="mDisable">禁用第一个子项</a> <a href="###" class="ax-btn" id="mEnable">启用第一个子项</a> <a href="###" class="ax-btn" id="mCollapse">折叠全部</a> <a href="###" class="ax-btn" id="mData">查看详细数据</a> -
let mIns = new axAccordion('#mIns', { content: [ { label: '标题1', content: '内容1', active: true, }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, { label: '标题4', content: '内容4', }, { label: '标题5', content: '内容5', }, ] }), mAdd = document.querySelector('#mAdd'), mRemove = document.querySelector('#mRemove'), mActive = document.querySelector('#mActive'), mDisable = document.querySelector('#mDisable'), mEnable = document.querySelector('#mEnable'), mUpdate = document.querySelector('#mUpdate'), mUpdateItem = document.querySelector('#mUpdateItem'), mCollapse = document.querySelector('#mCollapse'), mData = document.querySelector('#mData'); mAdd.onclick = () => { mIns.add({ label: '新增标题', content: '新增内容', }); } mRemove.onclick = () => { mIns.remove(1); } mUpdateItem.onclick = () => { mIns.updateContent(2, '更新的内容'); } mActive.onclick = () => { mIns.expand(2); } mDisable.onclick = () => { mIns.disable(0); } mEnable.onclick = () => { mIns.enable(0); } mCollapse.onclick = () => { mIns.collapseAll(); } mUpdate.onclick = () => { mIns.update({ active: 3, arrow: { position: 'begin', }, }); } mData.onclick = () => { console.log(mIns.data) }
全部展开和折叠
如果启用了multiple:true（允许展示多个），那么可使用this.expandAll和this.collapseAll两个方法。
-
<div id="allIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="allExpand">全部展开</a> <a href="###" class="ax-btn" id="allCollapse">全部折叠</a> -
let allIns = new axAccordion('#allIns', { multiple:true, content: [ { label: '标题1', content: '内容1', }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, ] }), allExpand = document.querySelector('#allExpand'), allCollapse = document.querySelector('#allCollapse'); allExpand.onclick = () => { allIns.expandAll(); } allCollapse.onclick = () => { allIns.collapseAll(); }
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<div id="saveIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="saveAdd">增加一个Tab</a> <a href="###" class="ax-btn" id="saveRemove">删除第二个Tab</a> <a href="###" class="ax-btn" id="saveUpdate">更新参数</a> <a href="###" class="ax-btn" id="saveLocal">查看本地保存的数据</a> <a href="###" class="ax-btn" id="saveData">查看详细数据</a> -
let saveIns = new axAccordion('#saveIns', { storageName: 'MyAccordion01', content: [ { label: '标题1', content: '内容1', active: true, }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, { label: '标题4', content: '内容4', } ] }), saveAdd = document.querySelector('#saveAdd'), saveRemove = document.querySelector('#saveRemove'), saveUpdate = document.querySelector('#saveUpdate'), saveLocal = document.querySelector('#saveLocal'), saveData = document.querySelector('#saveData'); saveAdd.onclick = () => { saveIns.add({ label: '新增标题', content: '新增内容', }); } saveRemove.onclick = () => { saveIns.remove(1); } saveUpdate.onclick = () => { saveIns.update({ active: 3, arrow: { position: 'begin', }, }); } saveLocal.onclick = () => { console.log(axLocalStorage.get('MyAccordion01')); } saveData.onclick = () => { console.log(saveIns.data); }
更新
通过使用this.update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，举例：{active:2}
- callback：回调函数，无参数
通过使用this.updateContent方法更新插件内容。该方法有两个参数：
- item：将要更新内容的子项，可以是数字(索引)、字符串(label值)、Dom节点(labelDom)或子项对象
- content：将要更新内容，视该tab项的type类型而定，比如type=async，那么conteng应该是一个同域网址
- callback：回调函数，支持一个参数即本子项对象
-
let updateIns = new axAccordion('#updateIns', { content: [ { label: '标题1', content: '内容1', active: true, }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, ] }), updateParamsBtn = document.querySelector('#updateParamsBtn'), updateContentsBtn = document.querySelector('#updateContentsBtn'); updateParamsBtn.onclick = () => { updateIns.update({ active: 2, arrow: { position: 'begin', }, }); } updateContentsBtn.onclick = () => { updateIns.updateContent(0, '标题1更新了内容！'); updateIns.updateContent(1, '标题2更新了内容！'); updateIns.updateContent(2, '标题3更新了内容！'); } -
<div id="updateIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="updateParamsBtn">更新参数</a> <a href="###" class="ax-btn" id="updateContentsBtn">更新内容</a>
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<div id="insDestroy"></div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a> <a href="###" class="ax-btn ax-primary" id="btnInit">再次启用</a> -
let insDestroy = new axAccordion('#insDestroy', { content: [ { label: '标题1', content: '内容1', active: true, }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', } ] }), btnDestroy = document.querySelector('#btnDestroy'), btnInit = document.querySelector('#btnInit'); btnDestroy.onclick = function () { insDestroy.destroy(function () { alert('销毁了实例！'); }); } btnInit.onclick = function () { insDestroy.init(); alert('重新初始化了实例！'); console.log('查看初始化数据：'); console.log(insDestroy.data); }
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit初始化后执行，无参数remove/onRemove删除子项后执行，无参数add/onAdd增加子项后执行，支持一个参数即增加项expand/onExpand展开子项后执行，支持一个参数即当前展开项expanded/onExpanded展开子项后执行，支持一个参数即当前展开项collapse/onCollapse折叠子项前执行，支持一个参数即当前折叠项collapsed/onCollapsed折叠子项后执行，支持一个参数即当前折叠项expandAll/onExpandAll展开所有子项后执行，无参数collapseAll/onCollapseAll折叠所有子项后执行，无参数disable/onDisable禁用子项后执行，支持一个参数即禁用项enable/onEanble启用子项后执行，支持一个参数即当前启用项disableAll/onDisableAll禁用全部Tab后执行，无参数enableAll/onEanbleAll启用全部Tab后执行，无参数updateContent/onUpdateContent更新子项内容后执行，支持一个参数即当前更新项update/onUpdate更新参数后执行，无参数destroy/onDestroy销毁后执行，无参数save/onSave保存数据后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
let onIns = new axAccordion('#onIns', { onInit: () => { console.log('初始化完成！') }, content: [ { label: '标题1', content: '内容1', active: true, }, { label: '标题2', content: '内容2', }, { label: '标题3', content: '内容3', }, { label: '标题4', content: '内容4', }, { label: '标题5', content: '内容5', }, ] }), onAdd = document.querySelector('#onAdd'), onRemove = document.querySelector('#onRemove'), onActive = document.querySelector('#onActive'), onDisable = document.querySelector('#onDisable'), onEnable = document.querySelector('#onEnable'), onUpdate = document.querySelector('#onUpdate'), onContent = document.querySelector('#onContent'), onDestroy = document.querySelector('#onDestroy'), onInit = document.querySelector('#onInit'); onAdd.onclick = () => { onIns.add({ label: '新增标题', content: '新增内容', }); } onRemove.onclick = () => { onIns.remove(1); } onContent.onclick = () => { onIns.updateContent(2, '更新的内容'); } onActive.onclick = () => { onIns.expand(3); } onDisable.onclick = () => { onIns.disable(4); } onEnable.onclick = () => { onIns.enable(4); } onUpdate.onclick = () => { onIns.update({ active: 3, arrow: { position: 'begin', }, }); } onDestroy.onclick = () => { onIns.destroy(); } onInit.onclick = () => { onIns.init(); } onIns.on('add', (item) => { console.log('成功添加：'); console.log(item); }).on('remove', () => { console.log('成功移除！'); }).on('active', (item) => { console.log('成功激活：'); console.log(item); }).on('disable', (items) => { console.log('成功禁用：'); console.log(items); }).on('enable', (items) => { console.log('成功禁用：'); console.log(items); }).on('updateContent', (item) => { console.log('成功更新内容：'); console.log(item); }).on('update', (item) => { console.log('成功更新参数！'); }).on('destroy', (item) => { console.log('成功销毁！'); }); -
<div id="onIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="onAdd">增加</a> <a href="###" class="ax-btn" id="onRemove">删除</a> <a href="###" class="ax-btn" id="onActive">激活</a> <a href="###" class="ax-btn" id="onDisable">禁用</a> <a href="###" class="ax-btn" id="onEnable">启用</a> <a href="###" class="ax-btn" id="onContent">更新内容</a> <a href="###" class="ax-btn" id="onUpdate">更新参数</a> <a href="###" class="ax-btn" id="onDestroy">销毁</a> <a href="###" class="ax-btn" id="onInit">重置</a>
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axAccordion('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
content: '',//设置数据源，支持数组格式数据和链接字符串，如果是链接字符串则为异步获取json
dispose: false,//是否禁止使用，默认是false即不禁用，可选择true禁用，头部将不能点击操作
active: '',//初始化焦点项，默认为0即默认以第一页为active状态，支持多种格式：一个字符串/一个数字/一个DOM节点/一个对象
disabled: '',//初始化禁用项，默认为空即不使用禁用状态，支持多种格式：一个字符串/一个数字/一个DOM节点/一个对象，或以上数组
multiple: false,//是否可同时显示多个item，默认false不允许，可填true允许
collapseAll: true,//初始化是否默认折叠所有ul，默认是true折叠，可选择false不折叠
borderShow: false,//是否显示边框，默认false不显示，可选择true显示边框
ajaxType: 'post',//异步提交的方式，默认post，可填get
trigger: 'click',//打开菜单的事件，默认是click点击显示，可选择其他原生事件例如mouseenter
max: 0,//最多允许多少项，默认为0即不限制
headerBreakShow: true,//头部和内容之间是否显示分割线，默认true显示，可填false不显示
bodyBreakShow: true,//项目之间是否显示分割线，默认true显示，可填false不显示
targetClass: '',//给目标节点即ax-accordion添加class类，一个多个均可，多个class用英文逗号或空格分开
itemNode: 'li',//项目的节点名，默认li，可使用其他节点名，例如section或div
arrow: {
enable: true,//是否显示指示箭头，默认true显示，可填false不显示
rotate: 180,//指示箭头的旋转角度，可填0、90或180；如果填0表示不旋转，为了表示打开和关闭，那么iconClose和iconOpen应该不同
iconClose: 'ax-icon-up',
iconOpen: 'ax-icon-up',
position: 'end',//指示箭头所在位置，默认end即在末尾，可选择begin在标题前面
},
tipPosition: 'begin',//提示文字的存放位置，默认begin即放在标题后面，可选择end放在末尾
addToActive: true,//是否在添加子项后让新子项成为焦点，默认true，可填false
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onAdd: '',//回调函数，新增项后执行，支持一个参数即新增项
onRemove: '',//回调函数，删除项后执行，无参数
onDisable: '',//回调函数，禁用项后执行，支持一个参数即禁用项
onEnable: '',//回调函数，启用项后执行，支持一个参数即启用项
onDisableALL: '',//回调函数，全部禁用项后执行，无参数
onEnableAll: '',//回调函数，全部启用项后执行，无参数
onExpand: '',//回调函数，项目展开前执行，支持一个参数即当前展开项
onExpanded: '',//回调函数，项目展开后执行，支持一个参数即当前展开项
onCollapse: '',//回调函数，项目折叠前执行，支持一个参数即当前折叠项
onCollapsed: '',//回调函数，项目折叠后执行，支持一个参数即当前折叠项
onUpdate: '',//回调函数，参数更新后执行，无参数
onUpdateContent: '',//回调函数，子项内容更新后执行，支持一个参数即当前更新项
onDestroy: '',//回调函数，销毁后执行，无参数
onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
onExpandAll: '',//回调函数，全部展开后执行，无参数
onCollapseAll: '',//回调函数，全部折叠后执行，无参数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"