jQuery EasyUI API 中文文档 – 菜单(menu)

  1. <html>
  2. <head>
  3.     <script src=”jquery-easyui/jquery.min.js”></script>
  4.     <script src=”jquery-easyui/jquery.easyui.min.js”></script>
  5.     <script src=”jquery-easyui/easyloader.js”></script>
  6.     <script src=”jquery-easyui/locale/easyui-lang-zh_CN.js”></script>
  7.     <link rel=”stylesheet” type=”text/css” href=”jquery-easyui/themes/default/easyui.css”>
  8.     <link rel=”stylesheet” type=”text/css” href=”jquery-easyui/themes/icon.css” />
  9. </head>
  10. <body>
  11.     <!–当class等于”menu-sep”时是一条直线–>
  12.     <div id=”mm” class=”easyui-menu” style=”width:120px;” data-options=”left:100,top:100″>
  13.         <div id=”b”>New</div>
  14.         <div id=”c”>
  15.             <span >Open</span>
  16.             <div style=”width:150px;”>
  17.                 <div><b>Word</b></div>
  18.                 <div>Excel</div>
  19.                 <div>PowerPoint</div>
  20.             </div>
  21.         </div>
  22.         <div iconCls=”icon-save”>Save</div>
  23.         <div class=”menu-sep”></div>
  24.         <div id=”a”>Exit</div>
  25.     </div>
  26.     <a class=”easyui-linkbutton” id=”aa1″ href=”javascript:void(0)”>显示</a>
  27.     <a class=”easyui-linkbutton” id=”aa2″ href=”javascript:void(0)”>关闭</a>
  28.     <a class=”easyui-linkbutton” id=”aa3″ href=”javascript:void(0)”>改变</a>
  29.     <a class=”easyui-linkbutton” id=”aa4″ href=”javascript:void(0)”>图标</a>
  30.     <a class=”easyui-linkbutton” id=”aa5″ href=”javascript:void(0)”>添加</a>
  31.     <a class=”easyui-linkbutton” id=”aa6″ href=”javascript:void(0)”>移除</a>
  32.     <a class=”easyui-linkbutton” id=”aa7″ href=”javascript:void(0)”>禁用</a>
  33.     <a class=”easyui-linkbutton” id=”aa8″ href=”javascript:void(0)”>开启</a>
  34.     <script>
  35.         function aa(){
  36.             alert(‘123’);
  37.         }
  38.         $(function (){
  39.             //点击显示,菜单显示
  40.             $(“#aa1”).click(function (){
  41.                 $(“#mm”).menu(‘show’,{
  42.                     left:100,
  43.                     top:100
  44.                 })
  45.             })
  46.             //点击关闭,菜单关闭
  47.             $(“#aa2”).click(function (){
  48.                 $(“#mm”).menu(‘hide’)
  49.             })
  50.             //点击改变,修改特定的菜单文本
  51.             $(“#aa3”).click(function (){
  52.                 $(“#mm”).menu(‘setText’,{
  53.                     target:$(“#a”),
  54.                     text:’嘻嘻哈哈’
  55.                 })
  56.             })
  57.             //点击图标,修改特定的图标
  58.             $(“#aa4”).click(function (){
  59.                 $(“#mm”).menu(‘setIcon’,{
  60.                     target:$(“#a”),
  61.                     iconCls:’icon-save’
  62.                 })
  63.             })
  64.             //点击添加,添加菜单
  65.             $(“#aa5”).click(function (){
  66.                 $(“#mm”).menu(‘appendItem’,{
  67.                     parent:$(“#a”),
  68.                     text:’呼呼啦啦’,
  69.                     iconCls:’icon-save’
  70.                 })
  71.             })
  72.             //点击移除,移除菜单某一项
  73.             var itemEl = $(‘#b’);
  74.             $(“#aa6”).click(function (){
  75.                 $(“#mm”).menu(‘removeItem’,itemEl)
  76.             })
  77.             //点击禁用,禁用菜单项
  78.             var itemEl1 = $(‘#c’);
  79.             $(“#aa7”).click(function (){
  80.                 $(“#mm”).menu(‘disableItem’,itemEl1)
  81.             })
  82.             //点击开启,开启禁用菜单项
  83.             var itemEl1 = $(‘#c’);
  84.             $(“#aa8”).click(function (){
  85.                 $(“#mm”).menu(‘enableItem’,itemEl1)
  86.             })
  87.             //把右键绑定当前的菜单
  88.             $(document).bind(‘contextmenu’,function(e){
  89.                 $(‘#mm’).menu(‘show’, {
  90.                         left: e.pageX,
  91.                         top: e.pageY
  92.                 });
  93.                 return false;
  94.             });
  95.         })
  96.     </script>
  97.     <!–
  98.     menu的属性
  99.     left:菜单的左边距
  100.     <div id=”mm” class=”easyui-menu” style=”width:120px;” data-options=”left:100″>
  101.         <div>New</div>
  102.     </div>
  103.     top:菜单的右边距
  104.     <div id=”mm” class=”easyui-menu” style=”width:120px;” data-options=”top:100″>
  105.         <div>New</div>
  106.     </div>
  107.     menu的事件
  108.     onShow:当一个菜单被显示后触发。
  109.     <div id=”mm” class=”easyui-menu” style=”width:120px;” data-options=”left:100,top:100,onShow:aa”>
  110.         <div>New</div>
  111.     </div>
  112.     onHide:在一个菜单被隐藏后触发。
  113.     <div id=”mm” class=”easyui-menu” style=”width:120px;” data-options=”left:100,top:100,onHide:aa”>
  114.         <div>New</div>
  115.     </div>
  116.     onClick:当一个菜单被点击时触发。
  117.     <div id=”mm” class=”easyui-menu” style=”width:120px;” data-options=”left:100,onClick:aa”>
  118.         <div>New</div>
  119.     </div>
  120.     menu的方法
  121.     show:在一个特定的位置显示菜单。
  122.         参数有2个属性:
  123.         left:新的左边距。
  124.         top:新的顶边距。
  125.     hide:隐藏一个菜单。
  126.     setText:设置特定的菜单文本,
  127.         参数包含2个属性:
  128.         target:DOM对象,将要被设置的菜单项。
  129.         text:字符串,新的文本值。
  130.     setIcon:设置特定的菜单项图标,
  131.         参数包含2个属性:
  132.         target:DOM对象,菜单项目。
  133.         iconCls: 新的图标css类。
  134.     removeItem:移除特定的菜单项。
  135.     enableItem:启用菜单项。
  136.     disableItem:禁用菜单项。
  137.     –>
  138. </body>
  139. </html>

标签