JQuery EasyUI(16)

王炜

2023-12-01

第十六章：Menu（菜单）组件

学习要点：

加载方式
菜单项属性
菜单属性
菜单事件
菜单方法

一、加载方式：

菜单组件通常用于快捷菜单，在加载方式上，通过class或JS进行设置为菜单组件。然后，再通过JS事件部分在响应。
1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" class="easyui-menu">    
       <div id="new">新建</div>
       <div>
          打开
          <div>word</div>
          <div>Excel</div>
          <div>Powerpoint</div>
       </div>
       <div data-options="iconCls:icon-save,disable:true,">保存</div>
       <div>退出</div>
    </div>
 </body>
</html>

2.JS加载方式：

$(function(){

  $(decument).on('contentmenu',function(e){
    e.preventDefault();
    $('#box').menu('show',{
        left:e.PageX,
        top:e.PageY,
    });
  });

}),

二、菜单项属性：

菜单项属性
属性名	值	说明
id	string	菜单项ID属性
text	string	菜单项文本
iconCls	string	显示在菜单项左侧的16*16像素图标的CSS类ID。
href	string	设置点击菜单项时候的页面位置。
disabled	boolean	定义是否显示菜单项。默认值为false。
onclick	function	在点击菜单项的时候调用函数。

三、菜单属性：

菜单属性
属性名	值	说明
zIndex	number	菜单z-index样式，增加它的值，默认值110000。
left	number	菜单的左边距位置。默认值0
top	number	菜单的上边距位置。默认值0
minWidth	number	菜单的最小宽度。默认值120
hideOnUnhover	boolean	当设置值为true时，在鼠标离开菜单的时候将自动隐藏菜单。默认值true。

四、菜单事件：

菜单事件
属性名	值	说明
onShow	none	在菜单显示之后触发。
onHide	none	在菜单隐藏之后触发。
onClick	item	在菜单项被点击的时候触发。

五、菜单方法：

菜单方法
属性名	值	说明
options	none	返回属性对象
show	pos	显示菜单到指定位置，'pos'参数有两个属性：left:新的左边距位置。top:新的上边距位置。
hide	none	隐藏菜单
destroy	none	销毁菜单
getItem	itemEl	获取指定的菜单项。得到的是一个菜单项的DOM元素
setText	param	设置指定菜单的文本。'param'参数包含2个属性：target:DOM对象。要设置值的菜单项。
setIcon	param	设置指定菜单项图标。'param'参数包含两个属性：target：DOM对象。要设置的菜单项。
findItem	text	查找的指定菜单项。返回的对象和getItem方法是一样的。
appendItem	options	追加新的菜单项，'options'参数代表的心菜单项属性。默认情况下添加的项在菜单项的顶部。追加一个子菜单项'parent'属性应该设置指定的父项元素，并且该父项元素必须是已经定义在页面上的。
removeItem	itemEl	移除指定的菜单项。
enableItem	itemEl	启用菜单项。
disableItem	itemEl	禁用菜单项。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" class="easyui-menu" data-options="top:10,left:10,minWidth:120,hideOnUnhover:false,">
       <div id="new">新建</div>
       <div>
          打开
          <div>word</div>
          <div>Excel</div>
          <div>Powerpoint</div>
       </div>
       <div data-options="iconCls:icon-save,disable:true,">保存</div>
       <div>退出</div>
    </div>
 </body>
</html>

$(function(){

  $(decument).on('contentmenu',function(e){
    e.preventDefault();
    $('#box').menu('show',{
        left:e.PageX,
        top:e.PageY,
    });
  });
   
   /*
   $(decument).on('contentmenu',function(){
      e.preventDefault();
      $('#box').menu('show');
    }); 

    console.log($('#box').menu('options'));
    $('#box').menu('destroy');
    console.log($('#box').menu('getItem','#new').id);

    $('#box').menu('setText',{
           target:'#new',
           text:'新建',           
      });

    $('#box').menu('setIcon',{
          target:'#new',
          iconCls:'icon-add',
     });

   console.log($('#box').menu('findItem','退出'));

   $('#box').menu('appendItem',{
        id:'add',
        text:'新增',
        iconCls:'icon-add',
        href:'123.html',
        onclick:function(){
          console.log($().menu('findItem','新增'));
       }
   });

   $('#box').menu('removeItem','#new');
   $('#box').menu('disableItem','#new');
   $('#box').menu('enableItem','#new');

   $('#box').menu({
      onShow:function(){
           alert('显示时触发！'),
       },
     onHide:function(){
         alert('隐藏时触发!'),
      },
     onClick:function(item){
         alert(item.text);
    },
   });
  */

}),

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/102934639

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载