Menu 菜单
简介
menu是项目开发中最长见到的组件之一，由menu实现页面跳转或版块内容变更。
特点
在经历v1.0和v2.0之后重新改写了，扩展了参数和监听回调，支持更多的数据源。axMenu的特点如下：
- 1、支持三种数据源，分别是物理节点、页面数组数据和json数据（数组又支持tree数组和带pId的一维数组）
- 2、支持纵向菜单和横向导航切换
- 3、支持多种监听回调
- 4、支持数据保存和刷新恢复加载
- 5、支持两种触发方式，分别是click和hover
- 6、支持两种内容，分别是a链接和文本
- 7、缩进样式支持八级，数据支持无限层级
- 8、支持菜单的增删改操作
使用方法
插件运行方式有两种：
- ax*属性：对ul+li标签结构使用
axMenu属性即可按默认参数运行插件。 - js实例：通过
new axMenu('#ID')方式创建实例运行。
-
<ul class="ax-menu" axMenu> <li> <div><i label>河北</i></div> <ul> <li> <div><i label>石家庄</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> <li> <div><i label>井陉矿区</i></div> </li> </ul> </li> <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></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> <li> <div><i label>广西</i></div> <ul> <li> <div><i label>南宁</i></div> </li> <li> <div><i label>柳州</i></div> </li> </ul> </li> </ul> <div class="ax-break"></div> <div class="ax-break-line"></div> <div class="ax-break"></div> <ul id="treeIns"></ul> -
let treeData = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' }] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市', children: [{ id: 8, label: '福田区' }, { id: 9, label: '龙岗区' }] }] }, { id: 10, label: '上海市', children: [{ id: 11, label: '黄浦区', }, { id: 12, label: '徐汇区', }, { id: 13, label: '长宁区', }] }, { id: 14, label: '重庆市' }]; new axMenu('#treeIns', { content: treeData });
数据源
以上使用了物理节点和树状数组数据创建实例，除此之外还支持扁平数组数据和异步json数据。
-
<ul id="flatIns"></ul> <div class="ax-break"></div> <div class="ax-break-line"></div> <div class="ax-break"></div> <ul id="ajaxIns"></ul> -
let flatData = [ {id:1,pId:-1,label:'北京市'}, {id:2,pId:1,label:'朝阳区'}, {id:3,pId:1,label:'丰台区'}, {id:4,pId:1,label:'海淀区'}, {id:5,pId:-1,label:'广东省'}, {id:6,pId:5,label:'广州市'}, {id:7,pId:5,label:'深圳市'}, {id:8,pId:7,label:'福田区'}, {id:9,pId:7,label:'龙岗区'}, {id:10,pId:-1,label:'上海市'}, {id:11,pId:10,label:'黄浦区'}, {id:12,pId:10,label:'徐汇区'}, {id:13,pId:10,label:'长宁区'}, {id:14,pId:-1,label:'重庆市'}, ]; new axMenu('#flatIns', { content: flatData }); new axMenu('#ajaxIns', { content: 'ajax/province.json' }); -
[ { "label": "河北", "children": [ { "label": "石家庄", "children": [ { "label": "长安区" }, { "label": "桥西区" }, { "label": "新华区" }, { "label": "裕华区" }, { "label": "井陉矿区" } ] }, { "label": "邢台" }, { "label": "邯郸" }, { "label": "保定" }, { "label": "衡水" } ] }, { "label": "四川", "children": [ { "label": "成都" }, { "label": "南充" }, { "label": "绵阳" } ] }, { "label": "广西", "children": [ { "label": "南宁" }, { "label": "柳州" } ] } ]
元素构成
axMenu每一项都会包含label元素即标题，还有其他常用的三种元素：
arrow指示箭头，通常出现在父节点上legend图例，通常放在label元素之前tip提示文字，通常放在label元素之后
以上三种元素会纳入树形数据当中；其他的自定义的元素还有dot红点和数字气泡等。
<ul class="ax-menu" axMenu>
<li>
<div><i class="ax-iconfont ax-icon-global" legend></i><i label>河北</i><i class="ax-dot"></i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<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>
<li><div><i label>井陉矿区</i></div></li>
</ul>
</li>
<li><div><i label>邢台</i><i tip>708万人</i></div></li>
<li><div><i label>邯郸</i><i tip>936万人</i></div></li>
<li><div><i label>保定</i><i tip>919万人</i></div></li>
<li><div><i label>衡水</i><i tip>418万人</i></div></li>
</ul>
</li>
<li>
<div><i class="ax-iconfont ax-icon-edit" legend></i><i label>四川</i><i class="ax-badge">13</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li><div><i label>成都</i><i tip>2119万人</i></div></li>
<li><div><i label>南充</i><i tip>556万人</i></div></li>
<li><div><i label>绵阳</i><i tip>488万人</i></div></li>
</ul>
</li>
<li>
<div><i class="ax-iconfont ax-icon-search" legend></i><i label>广西</i><i class="ax-badge ax-warning">2</i><i class="ax-iconfont ax-icon-right" arrow></i></div>
<ul>
<li><div><i label>南宁</i><i tip>883万人</i></div></li>
<li><div><i label>柳州</i><i tip>417万人</i></div></li>
</ul>
</li>
</ul>
深色风格
使用theme:"dark"属性即可实现深色菜单，如果不用theme属性可自行写入style样式。
<ul class="ax-menu" axMenu='theme:"dark"'>
<li>
<div><i label>河北</i></div>
<ul>
<li>
<div><i label>石家庄</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>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<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></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>
<li>
<div><i label>广西</i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
不要两侧边距
使用gapless:true属性可去除两侧边距；深色风格不适合去除左边距！
<ul class="ax-menu" axMenu='gapless:true'>
<li>
<div><i label>河北</i></div>
<ul>
<li>
<div><i label>石家庄</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>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<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></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>
<li>
<div><i label>广西</i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
选中指示
插件默认的expanded和selected指示是贯穿li的长竖线和浅色背景色，通过设置lamp属性可实现不同风格的selected指示效果。lamp:'dot'将在label左侧显示一个小点；lamp:'line'将在label左侧显示一个小竖线。
<ul class="ax-menu" axMenu='lamp:"dot"'>
<li>
<div><i label>河北</i></div>
<ul>
<li>
<div><i label>石家庄</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>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<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></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>
<li>
<div><i label>广西</i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<ul class="ax-menu" axMenu='lamp:"line"'>
<li>
<div><i label>河北</i></div>
<ul>
<li>
<div><i label>石家庄</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>
<li>
<div><i label>井陉矿区</i></div>
</li>
</ul>
</li>
<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></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>
<li>
<div><i label>广西</i></div>
<ul>
<li>
<div><i label>南宁</i></div>
</li>
<li>
<div><i label>柳州</i></div>
</li>
</ul>
</li>
</ul>
八级管理
本框架定义了八级菜单管理，如果需要定义更多级别，请修改css。
<style>
.ax-menu > li > :first-child{
padding-left:14px;
}
.ax-menu > li > ul > li > :first-child{
padding-left:calc(14px*3);
}
.ax-menu > li > ul > li > ul > li > :first-child{
padding-left:calc(14px*5);
}
.ax-menu > li > ul > li > ul > li > ul > li > :first-child{
padding-left:calc(14px*7);
}
.ax-menu > li > ul > li > ul > li > ul > li > ul > li > :first-child{
padding-left:calc(14px*9);
}
.ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > :first-child{
padding-left:calc(14px*11);
}
.ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > :first-child{
padding-left:calc(14px*13);
}
.ax-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > :first-child{
padding-left:calc(14px*15);
}
</style>
自定义宽度
menu菜单的宽度默认为220px，用户根据自己需要添加full属性可实现全宽效果；如果需要特定的宽度直接写上style即可。
<ul class="ax-menu" axMenu='full:true'>
<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>
互斥折叠
menu菜单默认是互斥折叠，可通过设置multiple:true属性使菜单可同时展开多个子项。
<ul class="ax-menu" axMenu='multiple:true'>
<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>
链接菜单
在某些时候我们需要将菜单设为A链接，点击之后实现页面跳转。实现A链接的方法有两种：
- 1、将物理节点的label节点改为A标签，并设置上href和target属性
- 2、在数组中对需要链接的项增加url和target属性
要注意的是如果父菜单变成了A链接，那么只能通过指示箭头展开子菜单。
-
<ul class="ax-menu" axMenu> <li> <div><a href="https://www.axui.cn" target="_blank" label>河北</a><i class="ax-iconfont ax-icon-right" arrow></i></div> <ul> <li> <div><a href="https://www.axui.cn" target="_blank" label>邢台</a></div> </li> <li> <div><a href="https://www.axui.cn" target="_blank" label>邯郸</a></div> </li> <li> <div><a href="https://www.axui.cn" target="_blank" label>保定</a></div> </li> <li> <div><a href="https://www.axui.cn" target="_blank" label>衡水</a></div> </li> </ul> </li> </ul> <div class="ax-break"></div> <ul class="ax-menu" id="aIns"></ul> -
new axMenu('#aIns', { content: [{ id: 1, label: '北京市', url: 'https://www.axui.cn', target: '_blank', children: [{ id: 2, label: '朝阳区', url: 'https://www.axui.cn', target: '_blank', }, { id: 3, label: '丰台区', url: 'https://www.axui.cn', target: '_blank', }, { id: 4, label: '海淀区', url: 'https://www.axui.cn', target: '_blank', }] }] });
项目回调
如果数据源是数组数据，除了label、tip、legend等属性之外，还可以使用callback回调函数，回调函数支持一个参数即项目本身，回调函数中的this指向实例本身。
-
<ul class="ax-menu" id="callbackIns"></ul> -
new axMenu('#callbackIns', { collapseAll: false, content: [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区', callback: (obj) => { obj.labelDom.onclick = () => { alert('点击了' + obj.label) } } }, { id: 3, label: '丰台区', callback: function(obj) { obj.labelDom.onclick = () => { //this指向实例本身 console.log(this.flatData); } } }, { id: 4, label: '海淀区', callback: function(obj) { obj.labelDom.onclick = () => { //this指向实例本身 this.collapseAll(); } } }] }] });
初始化展开
初始化展开的方法有两种，一种是对li使用expanded属性；第二种是使用active参数
- 1、对物理节点中的li节点使用expanded属性，如果设置了multiple:true，则可对多个li设置expanded属性
- 2、对终极物理节点（没有子节点）中的div节点(header节点)使用selected属性，结果将会即展开父层li又让div显示selected状态
- 3、使用插件中的active参数，active参数有多种写法：
- active为一个数字或者数字数组，比如active:1或active:[1,2]，将找到id为1或id为2的项
- active为普通字符串或分割字符串，比如active:'apple'或active:'apple,banana'，将找到label为apple或label为banana的项
- active为#开头字符串或分割字符串，比如active:'#one'或active:'#one,#two'，将找到节点（包括header和wrapper）的id为one或two的项，官网主菜单使用该方法
如果multiple为false，即使active设置项有多个也只会取第一个进行展开。
-
<ul class="ax-menu" axMenu> <li expanded> <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 class="ax-break"></div> <div class="ax-break-line"></div> <div class="ax-break"></div> <ul class="ax-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 selected><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 class="ax-break"></div> <div class="ax-break-line"></div> <div class="ax-break"></div> <ul class="ax-menu" id="activeIns"> <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> -
new axMenu('#activeIns', { active: 3 });
初始化禁用
禁用菜单有两个方法，一是使用disapose参数设为true即实现全部禁用；二是使用disabled属性或参数实现局部禁用。
与active一样，使用disabled属性或参数禁用又分几种情况：
- 1、对非终极物理节点中的div节点(header节点)使用disabled属性，将无法通过触发展开
- 2、对终极物理节点（没有子节点）中的div节点(header节点)使用disabled属性，该节点将无法通过触发实现selected状态
- 3、使用插件中的disabled参数，disabled参数有多种写法：
- disabled为一个数字或者数字数组，比如disabled:1或disabled:[1,2]，将找到id为1或id为2的项
- disabled为普通字符串或分割字符串，比如disabled:'apple'或disabled:'apple,banana'，将找到label为apple或label为banana的项
- disabled为#开头字符串或分割字符串，比如disabled:'#one'或disabled:'#one,#two'，将找到节点（包括header和wrapper）的id为one或two的项
-
<ul class="ax-menu" axMenu> <li> <div disabled><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 disabled><i label>成都</i></div> </li> <li> <div><i label>南充</i></div> </li> <li> <div><i label>绵阳</i></div> </li> </ul> </li> </ul> <div class="ax-break"></div> <div class="ax-break-line"></div> <div class="ax-break"></div> <ul class="ax-menu" id="disabledIns"> <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> -
new axMenu('#disabledIns', { disabled: [3,5] });
初始化完全展开
参数collapseAll默认为true即默认全部折叠，如果需要初始化完全展开需要将collapseAll设为false，并将multiple设为true。
<ul class="ax-menu" axMenu="collapse:false,multiple:true">
<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>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.flatData：是一个数组，输出当前实例的一维完整数据，包含的属性如下：- id：项目id，如果没有将自动创建
- pId：父几点id，如果没有将自动创建
- path：项目路径，例如“-1>1>2”
- floor：项目层级，第一层为1
- children：子元素，是数组
- label：标题，支持HTML文本
- selected：是否为选中状态
- disabled：是否为禁用状态
- expanded：是否为激活项（焦点项）
- wrapperDom：项目总节点（li）
- headerDom：标题行节点（div）
- bodyDom：子元素包裹节点（ul）
- labelDom：标题的标题节点（a或i）
- arrowDom：指示箭头节点（i）
- tipDom：提示内容节点（i）
- legendDom：图标节点（i）
- callback：回调函数，支持一个参数即项目本身，this指向实例本身
this.treeData：是一个数组，输出当前实例的多维完整数据，包含的属性同flatDatathis.targetDom：实例总节点this.destroyed：销毁状态this.rawHTML：物理节点初始化后的HTML内容（参数content不为空则this.rawHTML为空）
内部操作方法如下：
this.expand(obj,callback)：展开一个父节点，参数说明如下：- obj：支持多种格式，一个数字（项目id）或一个普通字符串（项目label）或一个#前缀字符串（dom的id）或一个dom节点（dom本身）或一个对象（项目本身）
- callback：函数类型，展开节点后的回调函数，有一个参数即展开的对象
this.expandAll()：展开所有父节点，无参数this.collapse(obj,callback)：折叠一个父节点，参数说明如下：- obj：支持多种格式，用法同expand方法的obj
- callback：函数类型，折叠节点后的回调函数，有一个参数即折叠的对象
this.active(obj,callback)：如果是终极节点则让终极节点成为selected状态并展开path中父节点；如果不是终极节点则展开path中的父节点，参数说明如下：- obj：支持多种格式，用法同expand方法的obj，支持数组
- callback：函数类型，折叠节点后的回调函数，有一个参数即selected的对象
this.collapseAll()：折叠所有父节点，无参数this.enable(obj,callback)：启用一个节点，参数说明如下：- obj：对象类型，将要启用的节点，用法同expand方法的obj，支持数组
- callback：函数类型，启用节点后的回调函数，有一个参数即启用的对象
this.enableAll(callback)：启用全部节点，支持回调函数，回调无参数this.disable(obj,callback)：禁用一个节点，参数说明如下：- obj：对象类型，将要禁用的节点，用法同expand方法的obj，支持数组
- callback：函数类型，禁用节点后的回调函数，有一个参数即禁用的对象
this.disableAll(callback)：禁用全部节点，支持回调函数，回调无参数this.remove(obj,callback)：删除一个节点以及子节点，参数说明如下：- obj：对象类型，将要删除的节点，同时从flatData和treeData中删除,用法同expand方法的obj，支持数组
- callback：函数类型，删除节点后的回调函数，有一个参数是obj，也就是自己
this.add(data, target, isChild, isFront, callback)：增加一个终极节点，参数说明如下：- data：对象或数组类型，对象支持多种写法：
- 1、字符串，例如：data='中国'
- 2、仅使用label属性，例如：data={label:'中国'}
- 3、使用更多属性，例如：data={label:'中国',selected:true,callback:()=>{}}
- 4、使用pId属性确认所属父层，例如：data={pId:5,label:'中国'}
- target：对象类型，将设置的父节点，用法同expand方法的obj
- isChild：布尔值，是否添加为父节点的子节点，默认为false即添加为目标节点的兄弟节点
- isFront：布尔值，新添加的节点是在目标节点的前方还是后方，默认end，可选择而start
- callback：函数类型，添加节点后的回调函数，支持一个参数obj即新增对象
this.update(setting,callback)：更新参数并重新渲染节点，参数说明如下：- setting：将要更新的参数，例如：setting={active:3,multiple:false}
- callback：回调函数，无参数
this.updateContent(obj,content,callback)：更新一个子项的内容，参数说明如下：- obj：与expand方法的obj参数一致
- content：更新的内容，content是字符串content='中国'，或对象content={label:'',url:'',target:''}
- callback：回调函数，无参数
this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前active、disabled和content的状态
- 对象格式，比如setting={active:1,diabled:3}
- callback：回调函数，支持一个参数即localstorage值：
this.getActive()：获得当前的展开项selected项，返回active对象数组（等同this.getExpanded()和this.getSelected()的合集），无参数this.getExpanded()：获得当前的展开项，返回展开对象数组，无参数this.getDisabled()：获得当前的禁用项，返回一个数组，无参数this.getSelected()：获得当前的选择项，返回一个对象，无参数
-
<div class="ax-row"> <ul class="ax-menu" id="mIns"></ul> <div class="ax-col"> <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> <div class="ax-break"></div> <a href="###" class="ax-btn" id="mExpand">展开“广东省”</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> <div class="ax-break"></div> <a href="###" class="ax-btn" id="mCollapseAll">折叠全部</a> <a href="###" class="ax-btn" id="mExpandAll">展开全部</a> <a href="###" class="ax-btn" id="mData">查看详细数据</a> </div> </div> -
let treeData = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' }] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市', children: [{ id: 8, label: '福田区' }, { id: 9, label: '龙岗区' }] }] }, { id: 10, label: '上海市', children: [{ id: 11, label: '黄浦区', }, { id: 12, label: '徐汇区', }, { id: 13, label: '长宁区', }] }, { id: 14, label: '重庆市' }]; let mIns = new axMenu('#mIns', { content: treeData, multiple:true, }), mAdd = document.querySelector('#mAdd'), mRemove = document.querySelector('#mRemove'), mExpand = document.querySelector('#mExpand'), mActive = document.querySelector('#mActive'), mDisable = document.querySelector('#mDisable'), mEnable = document.querySelector('#mEnable'), mUpdate = document.querySelector('#mUpdate'), mUpdateItem = document.querySelector('#mUpdateItem'), mCollapseAll = document.querySelector('#mCollapseAll'), mExpandAll = document.querySelector('#mExpandAll'), mData = document.querySelector('#mData'); mAdd.onclick = () => { mIns.add('青海省'); } mRemove.onclick = () => { mIns.remove(2); } mUpdateItem.onclick = () => { mIns.updateContent(4, '更新的内容'); } mExpand.onclick = () => { mIns.expand(5); } mActive.onclick = () => { mIns.active(8); } mDisable.onclick = () => { mIns.disable(1); } mEnable.onclick = () => { mIns.enable(1); } mCollapseAll.onclick = () => { mIns.collapseAll(); } mExpandAll.onclick = () => { mIns.expandAll(); } mUpdate.onclick = () => { mIns.update({ active: 3, multiple:false, }); console.log('id为3的项激活并且将multiple设为false'); } mData.onclick = () => { console.log(mIns.flatData); console.log(mIns.treeData); }
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<ul class="ax-menu" id="saveIns"></ul> <div class="ax-break"></div> <a href="###" class="ax-btn" id="saveAdd">增加“青海省”</a> <a href="###" class="ax-btn" id="saveRemove">删除“北京”</a> <a href="###" class="ax-btn" id="saveEdit">修改“重庆市”</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 treeData = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' }] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市', children: [{ id: 8, label: '福田区' }, { id: 9, label: '龙岗区' }] }] }, { id: 10, label: '上海市', children: [{ id: 11, label: '黄浦区', }, { id: 12, label: '徐汇区', }, { id: 13, label: '长宁区', }] }, { id: 14, label: '重庆市' }]; let saveIns = new axMenu('#saveIns', { storageName: 'MyMenu01', //演示页面避免重复修改原数组，故先复制 content: axClone(treeData), }), saveAdd = document.querySelector('#saveAdd'), saveRemove = document.querySelector('#saveRemove'), saveEdit = document.querySelector('#saveEdit'), saveUpdate = document.querySelector('#saveUpdate'), saveLocal = document.querySelector('#saveLocal'), saveData = document.querySelector('#saveData'); saveAdd.onclick = () => { saveIns.add('青海省'); } saveRemove.onclick = () => { saveIns.remove(1); } saveEdit.onclick = () => { saveIns.updateContent(14,'重庆市被修改了'); } saveUpdate.onclick = () => { saveIns.update({ active: 3, }); } saveLocal.onclick = () => { console.log(axLocalStorage.get('MyMenu01')); } saveData.onclick = () => { console.log(saveIns.flatData); console.log(saveIns.treeData); }
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<ul class="ax-menu" id="insDestroy"></ul> <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 treeData = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' }] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市', children: [{ id: 8, label: '福田区' }, { id: 9, label: '龙岗区' }] }] }, { id: 10, label: '上海市', children: [{ id: 11, label: '黄浦区', }, { id: 12, label: '徐汇区', }, { id: 13, label: '长宁区', }] }, { id: 14, label: '重庆市' }]; let insDestroy = new axMenu('#insDestroy', { //演示页面避免重复修改原数组，故先复制 content: axClone(treeData), }), 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.flatData); console.log(insDestroy.treeData); }
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名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 treeData = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' }] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市', children: [{ id: 8, label: '福田区' }, { id: 9, label: '龙岗区' }] }] }, { id: 10, label: '上海市', children: [{ id: 11, label: '黄浦区', }, { id: 12, label: '徐汇区', }, { id: 13, label: '长宁区', }] }, { id: 14, label: '重庆市' }]; let onIns = new axMenu('#onIns', { onInit: () => { console.log('初始化完成！') }, //演示页面避免重复修改原数组，故先复制 content: axClone(treeData), }), 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: '新增标题', tip: '提示', }); } onRemove.onclick = () => { onIns.remove(1); } onContent.onclick = () => { onIns.updateContent(1, '北京市更新了'); } onActive.onclick = () => { onIns.expand(10); } onDisable.onclick = () => { onIns.disable(5); } onEnable.onclick = () => { onIns.enable(5); } onUpdate.onclick = () => { onIns.update({ active: 10, }); } 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('成功销毁！'); }); -
<ul class="ax-menu" id="onIns"></ul> <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 axMenu('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
theme: 'light',//主体颜色风格，默认light白底黑子，可选择dark深色风格
content: '',//设置数据源，支持数组格式数据和链接字符串，如果是链接字符串则为异步获取json
dispose: false,//是否禁止使用，默认是false即不禁用，可选择true禁用，头部将不能点击操作
active: '',//初始化展开项，支持多种格式：一个字符串/一个数字/一个DOM节点/一个对象，或以上数组，默认为空即不展开
disabled: '',//初始化禁用项，支持多种格式：一个字符串/一个数字/一个DOM节点/一个对象，或以上数组，默认为空即不使用禁用状态
multiple: false,//是否允许同时展开多个父节点，默认false不允许，可填true允许
collapseAll: true,//初始化是否默认折叠所有父节点，默认是true折叠，可选择false不折叠
ajaxType: 'post',//异步提交的方式，默认post，可填get
trigger: 'click',//打开菜单的事件，默认是click点击显示，可选择hover即鼠标划入展开移除折叠
firstFloor: -1, //顶层的编号,数字类型，menu本质是一个tree，每一项都需要pId和id
idStart: 0,//id开始编号，数字类型；如果从物理节点创建菜单，则需要自动创建项目id，默认第一项id为0
arrowShow: true,//是否显示指示箭头，默认显示
max: 0,//最多允许多少项，默认为0即不限制
targetClass: '',//给目标节点即ax-menu添加class类，一个多个均可，多个class用英文逗号或空格分开
addToActive: true,//是否在添加子项后让新子项成为焦点，默认true，可填false
gapless: false,//菜单是否是无间隙的，默认false即有间隙，可设为true则两侧的padding将取消
lamp: '',//展开状态和selected状态的风格，默认为空即在展开的li左侧显示一道竖线；可选择dot即在selected项左侧显示一个小点指示；也可选择line即在selected项左侧显示一条短竖线
full: false,//是否铺满整个父层，默认false即按220px宽度展示，可设为true则按100%铺满父层，对nav模式无效
nav: {//nav参数用于水平导航，见ax-navigation.php
enable: false,//是否将菜单横向展示，也就是变成导航菜单，默认不启用
headerWidth: '',//设定水平菜单中一级菜单宽度，填写举例：300px、30rem或auto
bodyWidth: '',//设定水平菜单中下拉菜单宽度，填写举例：300px、30rem或auto
marginLeft: '',//设定水平菜单中一级菜单之间的左间隔，填写举例：'28px'
marginRight: '',//设定水平菜单中一级菜单之间的右间隔，填写举例：'28px'
align: 'left',//导航文字排列方式，默认left居左对齐，可选择center或right
pageClose: true,//使用nav模式后是否允许点击li之外区域折叠导航
},
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"