002. EsayUI系列之easyui-menu

<二>.easyui-menu菜单
 

主要用于右键菜单显示。

 属性如下：
 zIndex: Menu z-index样式。注释：z-index 属性设置元素的堆叠顺序。
 left:菜单左起位置。默认0。
 top: 菜单顶部位置。默认0。
 href:当点击菜单项时能在当前浏览器窗口显示不同的网址。
事件如下:
onShow:激活后显示菜单。
onHide:激活后隐藏菜单。
方法如下:
show:在指定的位置显示一个菜单。该位置上包含两个参数：
     left:新的左起位置。
     top:新的顶部位置。
hide:隐藏一个菜单。

demo1：
<div id="id1" class="easyui-menu" style="width:120px;">
  <div οnclick="javascript:alert('打开一个新的对话框')">New</div>
  <div>
   <span>Open</span>
   <div style="width:150px;">
    <div><b>Word</b></div>
    <div>Excel</div>
    <div>PowerPoint</div>
  
    <div>
     <span>other</span>
     <div style="width:120px;">
      <div href="xxx.html">xxxx</div>
      <div><a href="http://www.xxx.com" target="_blank">百度</a></div>
     </div>
    </div>
   </div>
  </div>
  <div icon="icon-save">Save</div>
  <div class="menu-sep"></div>
  <div>Exit</div>
 </div>

 

效果如下：

 

注：

1、 <div class="menu-sep"></div>为显示分割线

2、 menu使用很简单，直接在div中设置class="easyui-menu" 即可，然后调用显示。

 

显示方法：

1、 页面初始化时候显示

 

$(document).ready(function(){
   //创建菜单
    $('#ID1').menu();
    //当菜单创建时 是不可见的，可使用show、hide方法显示或者隐藏
   $('#ID1').menu('show',{
    left:200,
    top:100
    });
     
    
   }); 

 

2、 事件绑定显示：

eg：绑定右键事件显示：

$(document).bind('contextmenu',function(e){
    $('#id1').menu('show', {
     left: e.pageX,
     top: e.pageY
    });
    return false;
   });

 

3、 点击显示

 

$('#div1').click(function(){
    $('#id1').menu('show',{
     left:100,
     top:200
    });
   });