仿word菜单工具栏风格的菜单控件，支持分组、支持多级下级菜单、支持自动调整菜单布局、支持全局事件绑定及菜单项事件绑定。
-
分组：通过菜单项
items数组数据的层级结构对工具栏菜单进行分组。 -
多级菜单：顶层显示为分组标题，二级为面板菜单，之后的层级为弹出菜单。
-
自动调整菜单布局：标准情况下菜单显示为普通的面板菜单，面板菜单中显示每个分组中全部的菜单项； 在宽度不够无法全部展示面板菜单项时，会将面板菜单分组自动调整为分组缩略图模式。
-
事件绑定：通过全局
onclick事件绑定默认的菜单点击事件；并且可以通过每个菜单项的onclick事件覆盖默认的全局事件。
在dist文件夹下，首先将jquery类库引入项目，然后引入jquery.menubar文件夹至项目中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery.menubar demo</title>
</head>
<link rel="stylesheet" href="sass/index.css">
<link rel="stylesheet" href="jquery.menubar/sass/jquery.menubar.css">
<body>
<div id="menubar" class="container"></div>
<script src="js/jquery.js"></script>
<script src="jquery.menubar/js/jquery.menubar.js"></script>
</body>
</html>var settings = {
onclick: function (text, value, menuId) {
console.log('menubar click test');
},
autoLayout : true
// defaultItem类型
items: [{
text: '编辑1',
value: '',
icon: {
url: {
'default': {
small: '../image/bom16.png',
big: '../image/bom16.png'
},
hover: {
small: '../image/bom24.png',
big: '../image/bom24.png'
}
},
//或者
sprite: {
'default': {
small: 'sprite-16-bom-default',
big: 'sprite-24-bom-default'
},
hover: {
small: 'sprite-16-bom-hover',
big: 'sprite-24-bom-hover'
}
}
},
// panel-big small popup-small
style: 'small',
onclick : function( text , value ){}
// defaultItem类型
children: []
}]
};配置菜单默认的点击事件
配置菜单是否自适应布局，默认为true。在浏览器窗口大小改变时，自动对工具栏菜单进行重新布局。
配置每个菜单的具体的信息，是一个数组对象。
text:菜单项的显示值。
value:菜单项的编码值。
icon:菜单项的显示图标，是一个对象。其中url为图片的路径；sprite为雪碧圖的className，一般为雪碧图使用。url的优先级较高。
style:菜单的显示样式。small,big两个选项，默认为small。
onclick:菜单项的onclick事件，可以覆盖默认的全局事件。
children:配置此菜单项的下级对象，格式与items一致。
var settings={...};
$('#menubar').menubar(settings);$('#menubar').menubar('destroy');$('#menubar').menubar('layout');###开发
创建build
gulp build
开发环境
gulp develop