jquery easy-ui 使用menu-button 制作自定义菜单

首选引入 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>