首选引入 js 和 css
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
首先建立一个pannel界面
$('#p1').panel({
title: '功能菜单', //标题信息
iconCls: 'icon-save', //头部图标
collapsible: true, //是否有折叠按钮
minimizable: false, //是否显示最小化按钮
maximizable: false, //是否显示最大化按钮
width: '790', //设置宽度
height: '55', //设置高度
loadingMessage: '加载数据信息'//加载数据时的显示信息
});
在panel 中建立一个 a标签 id为 btn1
用js 方式加载 自定义菜单
$('#btn1').menubutton({
menu:'#mm1' //此属性可加载主菜单的子项目 通过id 选择器的方式访问子项
});
<div id="mm1"> // 这里的id 应与 menu 属性的值 对应
<div data-options="iconCls:'icon-save'">用户信息</div> //可为菜单项目添加图标
<div data-options="iconCls:'icon-save'">水表信息</div>
<div data-options="iconCls:'icon-save'">价格信息</div>
<div data-options="iconCls:'icon-save'">公司信息</div>
</div>
访问每个子项的点击事件
$('#mm1').menu({
onClick: function (item) {
switch (item.text) {
case '用户信息':
break;
case '水表信息':
alert('点击了:22222');
break;
default:
}
}
});
开可通过css 的方式加载
<a id="btn3" class="easyui-menubutton" data-options="menu:'#mm3'" href="javascript:void(0)">收费管理</a>
<div id="mm3">
<div data-options="iconCls:'icon-save'">用户信息</div>
<div data-options="iconCls:'icon-save'">水表信息</div>
<div data-options="iconCls:'icon-save'">价格信息</div>
<div data-options="iconCls:'icon-save'">公司信息</div>
<div data-options="iconCls:'icon-save'">用户信息</div>
</div>