jQuery EasyUI水平菜单使用方法从入门到精通详细讲解配置选项事件处理动态菜单创建响应式设计以及项目实战中的技巧与注意事项

威震华夏关云长 · 发表于 2025-9-18 02:40:13

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

1. jQuery EasyUI简介

jQuery EasyUI是一个基于jQuery的用户界面插件集合，它为网页开发者提供了丰富的UI组件，如数据网格、树形菜单、面板、标签页等。这些组件可以帮助开发者快速构建功能丰富、界面美观的Web应用程序。EasyUI的主要特点是易于使用、轻量级且跨浏览器兼容。

在众多组件中，菜单组件是Web应用中常见的导航元素，而水平菜单则是其中一种重要的表现形式。水平菜单通常用于网站顶部导航栏，能够清晰地展示网站的主要功能模块，提供直观的用户导航体验。

2. 水平菜单基础入门

基本概念

jQuery EasyUI的水平菜单是通过<div>元素结合特定的HTML结构和EasyUI的API来创建的。菜单项可以包含文本、图标，并且可以支持子菜单，形成多级菜单结构。

简单示例

下面是一个最基本的jQuery EasyUI水平菜单示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 水平菜单示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="mm" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div>Word</div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="$('#mm').menu('show', {left: 0, top: 0})">Show Menu</a>
</div>
</body>
</html>

复制代码

必要的HTML结构

要创建一个水平菜单，我们需要以下基本的HTML结构：

<div id="menu" class="easyui-menu" data-options="mode:'horizontal'">
<div data-options="name:'item1', iconCls:'icon-edit'">菜单项1</div>
<div data-options="name:'item2'">
<span>菜单项2</span>
<div>
<div data-options="name:'subitem1'">子菜单项1</div>
<div data-options="name:'subitem2'">子菜单项2</div>
</div>
</div>
<div data-options="name:'item3', iconCls:'icon-help'">菜单项3</div>
</div>

复制代码

关键点说明：

• 最外层div需要添加class="easyui-menu"来标识这是一个EasyUI菜单组件。
• data-options="mode:'horizontal'"指定菜单为水平模式。
• 每个菜单项使用div元素表示。
• 子菜单通过嵌套div结构实现。
• data-options属性用于配置菜单项的各种选项，如名称、图标等。

3. 配置选项详解

常用配置项

jQuery EasyUI水平菜单提供了丰富的配置选项，下面是一些常用的配置项：

1.

mode：菜单模式，可以是’horizontal’（水平）或’vertical’（垂直）。$('#menu').menu({
mode: 'horizontal'
});

复制代码

2.

zIndex：菜单的z-index值，用于控制菜单的堆叠顺序。$('#menu').menu({
zIndex: 110000
});

复制代码

3.

left：菜单的左侧位置。$('#menu').menu({
left: 100
});

复制代码

4.

top：菜单的顶部位置。$('#menu').menu({
top: 100
});

复制代码

5.

minWidth：菜单的最小宽度。$('#menu').menu({
minWidth: 150
});

复制代码

6.

hideOnUnhover：当鼠标离开菜单时是否自动隐藏菜单，默认为true。$('#menu').menu({
hideOnUnhover: false
});

复制代码

7.

duration：定义动画持续时间，以毫秒为单位。$('#menu').menu({
duration: 200
});

复制代码

mode：菜单模式，可以是’horizontal’（水平）或’vertical’（垂直）。

$('#menu').menu({
mode: 'horizontal'
});

复制代码

zIndex：菜单的z-index值，用于控制菜单的堆叠顺序。

$('#menu').menu({
zIndex: 110000
});

复制代码

left：菜单的左侧位置。

$('#menu').menu({
left: 100
});

复制代码

top：菜单的顶部位置。

$('#menu').menu({
top: 100
});

复制代码

minWidth：菜单的最小宽度。

$('#menu').menu({
minWidth: 150
});

复制代码

hideOnUnhover：当鼠标离开菜单时是否自动隐藏菜单，默认为true。

$('#menu').menu({
hideOnUnhover: false
});

复制代码

duration：定义动画持续时间，以毫秒为单位。

$('#menu').menu({
duration: 200
});

复制代码

高级配置项

除了基本配置项外，jQuery EasyUI还提供了一些高级配置选项，用于更精细地控制菜单的行为：

1.

align：菜单的对齐方式，可以是’left’或’right’。$('#menu').menu({
align: 'right'
});

复制代码

2.

itemHeight：菜单项的高度。$('#menu').menu({
itemHeight: 30
});

复制代码

3.

noline：是否隐藏菜单项之间的分隔线，默认为false。$('#menu').menu({
noline: true
});

复制代码

4.

disabled：是否禁用菜单，默认为false。$('#menu').menu({
disabled: true
});

复制代码

align：菜单的对齐方式，可以是’left’或’right’。

$('#menu').menu({
align: 'right'
});

复制代码

itemHeight：菜单项的高度。

$('#menu').menu({
itemHeight: 30
});

复制代码

noline：是否隐藏菜单项之间的分隔线，默认为false。

$('#menu').menu({
noline: true
});

复制代码

disabled：是否禁用菜单，默认为false。

$('#menu').menu({
disabled: true
});

复制代码

配置示例

下面是一个综合使用多种配置选项的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 水平菜单配置示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
<h2>jQuery EasyUI 水平菜单配置示例</h2>
<div id="mm" style="width:100%;"></div>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="showMenu()">显示菜单</a>
</div>
<script>
$(function(){
$('#mm').menu({
mode: 'horizontal',
itemHeight: 35,
duration: 300,
noline: false,
data: [{
text: '文件',
iconCls: 'icon-file',
children: [{
text: '新建',
iconCls: 'icon-add',
onclick: function(){alert('新建文件');}
},{
text: '打开',
iconCls: 'icon-open',
children: [{
text: 'Word文档',
onclick: function(){alert('打开Word文档');}
},{
text: 'Excel表格',
onclick: function(){alert('打开Excel表格');}
}]
},{
text: '保存',
iconCls: 'icon-save',
disabled: true
}]
},{
text: '编辑',
iconCls: 'icon-edit',
children: [{
text: '撤销',
iconCls: 'icon-undo'
},{
text: '重做',
iconCls: 'icon-redo'
}]
},{
text: '帮助',
iconCls: 'icon-help',
onclick: function(){alert('帮助信息');}
}]
});
});
function showMenu(){
$('#mm').menu('show', {
left: 0,
top: 50
});
}
</script>
</body>
</html>

复制代码

4. 事件处理

常用事件

jQuery EasyUI水平菜单提供了多种事件，用于响应用户的交互行为：

1.

onShow：当菜单显示时触发。$('#menu').menu({
onShow: function(){
console.log('菜单已显示');
}
});

复制代码

2.

onHide：当菜单隐藏时触发。$('#menu').menu({
onHide: function(){
console.log('菜单已隐藏');
}
});

复制代码

3.

onClick：当点击菜单项时触发。$('#menu').menu({
onClick: function(item){
console.log('点击了菜单项: ' + item.text);
}
});

复制代码

onShow：当菜单显示时触发。

$('#menu').menu({
onShow: function(){
console.log('菜单已显示');
}
});

复制代码

onHide：当菜单隐藏时触发。

$('#menu').menu({
onHide: function(){
console.log('菜单已隐藏');
}
});

复制代码

onClick：当点击菜单项时触发。

$('#menu').menu({
onClick: function(item){
console.log('点击了菜单项: ' + item.text);
}
});

复制代码

事件绑定方法

除了在初始化菜单时直接配置事件处理函数外，还可以使用以下方法绑定事件：

1.

使用bind方法：$('#menu').bind('click', function(event, item){
console.log('点击了菜单项: ' + item.text);
});

复制代码

2.

使用on方法（推荐）：$('#menu').on('click', function(event, item){
console.log('点击了菜单项: ' + item.text);
});

复制代码

使用bind方法：

$('#menu').bind('click', function(event, item){
console.log('点击了菜单项: ' + item.text);
});

复制代码

使用on方法（推荐）：

$('#menu').on('click', function(event, item){
console.log('点击了菜单项: ' + item.text);
});

复制代码

事件处理示例

下面是一个综合使用多种事件的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 水平菜单事件处理示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
body {
padding: 20px;
}
#log {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>jQuery EasyUI 水平菜单事件处理示例</h2>
<div id="mm" class="easyui-menu" style="width:100%;" data-options="mode:'horizontal'">
<div data-options="name:'file', iconCls:'icon-file'">
<span>文件</span>
<div style="width:150px;">
<div data-options="name:'new', iconCls:'icon-add'">新建</div>
<div data-options="name:'open', iconCls:'icon-open'">打开</div>
<div data-options="name:'save', iconCls:'icon-save'">保存</div>
<div class="menu-sep"></div>
<div data-options="name:'exit'">退出</div>
</div>
</div>
<div data-options="name:'edit', iconCls:'icon-edit'">
<span>编辑</span>
<div style="width:150px;">
<div data-options="name:'undo', iconCls:'icon-undo'">撤销</div>
<div data-options="name:'redo', iconCls:'icon-redo'">重做</div>
<div class="menu-sep"></div>
<div data-options="name:'cut', iconCls:'icon-cut'">剪切</div>
<div data-options="name:'copy', iconCls:'icon-copy'">复制</div>
<div data-options="name:'paste', iconCls:'icon-paste'">粘贴</div>
</div>
</div>
<div data-options="name:'help', iconCls:'icon-help'">帮助</div>
</div>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="showMenu()">显示菜单</a>
<a href="#" class="easyui-linkbutton" onclick="clearLog()">清除日志</a>
</div>
<div id="log"></div>
<script>
$(function(){
// 初始化菜单事件
$('#mm').menu({
onShow: function(){
log('菜单已显示');
},
onHide: function(){
log('菜单已隐藏');
},
onClick: function(item){
log('点击了菜单项: ' + item.text + ' (name: ' + item.name + ')');
}
});
// 为特定菜单项添加事件处理
$('#mm').menu('setItem', {
target: $('#mm').menu('findItem', '新建').target,
onclick: function(){
log('执行新建操作');
}
});
$('#mm').menu('setItem', {
target: $('#mm').menu('findItem', '打开').target,
onclick: function(){
log('执行打开操作');
}
});
$('#mm').menu('setItem', {
target: $('#mm').menu('findItem', '保存').target,
onclick: function(){
log('执行保存操作');
}
});
$('#mm').menu('setItem', {
target: $('#mm').menu('findItem', '退出').target,
onclick: function(){
log('执行退出操作');
}
});
});
function showMenu(){
$('#mm').menu('show', {
left: 0,
top: 50
});
}
function log(message){
var $log = $('#log');
var time = new Date().toLocaleTimeString();
$log.append('<div>[' + time + '] ' + message + '</div>');
$log.scrollTop($log[0].scrollHeight);
}
function clearLog(){
$('#log').empty();
}
</script>
</body>
</html>

复制代码

5. 动态菜单创建

动态添加菜单项

在实际应用中，我们经常需要根据用户权限或系统状态动态添加菜单项。jQuery EasyUI提供了多种方法来实现这一功能：

1.

使用appendItem方法：// 添加一个新的菜单项
$('#menu').menu('appendItem', {
text: '新菜单项',
iconCls: 'icon-add',
onclick: function(){
alert('点击了新菜单项');
}
});

复制代码

2.

使用insertItem方法：// 在指定位置插入一个新的菜单项
$('#menu').menu('insertItem', {
item: {
text: '插入的菜单项',
iconCls: 'icon-edit',
onclick: function(){
alert('点击了插入的菜单项');
}
},
index: 1 // 插入到第二个位置
});

复制代码

使用appendItem方法：

// 添加一个新的菜单项
$('#menu').menu('appendItem', {
text: '新菜单项',
iconCls: 'icon-add',
onclick: function(){
alert('点击了新菜单项');
}
});

复制代码

使用insertItem方法：

// 在指定位置插入一个新的菜单项
$('#menu').menu('insertItem', {
item: {
text: '插入的菜单项',
iconCls: 'icon-edit',
onclick: function(){
alert('点击了插入的菜单项');
}
},
index: 1 // 插入到第二个位置
});

复制代码

动态修改菜单

我们也可以动态修改现有的菜单项：

1.

使用setItem方法：// 修改指定的菜单项
$('#menu').menu('setItem', {
target: $('#menu').menu('findItem', '旧菜单项').target,
text: '新菜单项',
iconCls: 'icon-save',
disabled: false
});

复制代码

2.

使用enableItem和disableItem方法：
“`javascript
// 启用菜单项$('#menu').menu('enableItem', $(‘#menu’).menu(‘findItem’, ‘禁用菜单项’).target);

复制代码

使用setItem方法：

// 修改指定的菜单项
$('#menu').menu('setItem', {
target: $('#menu').menu('findItem', '旧菜单项').target,
text: '新菜单项',
iconCls: 'icon-save',
disabled: false
});

复制代码

使用enableItem和disableItem方法：
“`javascript
// 启用菜单项$('#menu').menu('enableItem', $(‘#menu’).menu(‘findItem’, ‘禁用菜单项’).target);

// 禁用菜单项$('#menu').menu('disableItem', $(‘#menu’).menu(‘findItem’, ‘启用菜单项’).target);

### 动态删除菜单项
删除菜单项同样简单：
1. **使用removeItem方法**：
```javascript
// 删除指定的菜单项
var item = $('#menu').menu('findItem', '要删除的菜单项');
if (item){
$('#menu').menu('removeItem', item.target);
}

复制代码

动态菜单示例

下面是一个综合展示动态菜单操作的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 动态菜单示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
body {
padding: 20px;
}
.operation-panel {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
background-color: #f5f5f5;
}
.operation-panel .easyui-linkbutton {
margin-right: 10px;
margin-bottom: 5px;
}
#log {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>jQuery EasyUI 动态菜单示例</h2>
<div id="mm" class="easyui-menu" style="width:100%;" data-options="mode:'horizontal'">
<div data-options="name:'file', iconCls:'icon-file'">
<span>文件</span>
<div style="width:150px;">
<div data-options="name:'new', iconCls:'icon-add'">新建</div>
<div data-options="name:'open', iconCls:'icon-open'">打开</div>
<div data-options="name:'save', iconCls:'icon-save'">保存</div>
</div>
</div>
<div data-options="name:'edit', iconCls:'icon-edit'">
<span>编辑</span>
<div style="width:150px;">
<div data-options="name:'undo', iconCls:'icon-undo'">撤销</div>
<div data-options="name:'redo', iconCls:'icon-redo'">重做</div>
</div>
</div>
</div>
<div class="operation-panel">
<h3>菜单操作</h3>
<a href="#" class="easyui-linkbutton" onclick="showMenu()">显示菜单</a>
<a href="#" class="easyui-linkbutton" onclick="hideMenu()">隐藏菜单</a>
<a href="#" class="easyui-linkbutton" onclick="appendMenuItem()">添加菜单项</a>
<a href="#" class="easyui-linkbutton" onclick="insertMenuItem()">插入菜单项</a>
<a href="#" class="easyui-linkbutton" onclick="updateMenuItem()">修改菜单项</a>
<a href="#" class="easyui-linkbutton" onclick="removeMenuItem()">删除菜单项</a>
<a href="#" class="easyui-linkbutton" onclick="enableMenuItem()">启用菜单项</a>
<a href="#" class="easyui-linkbutton" onclick="disableMenuItem()">禁用菜单项</a>
<a href="#" class="easyui-linkbutton" onclick="clearLog()">清除日志</a>
</div>
<div id="log"></div>
<script>
$(function(){
// 初始化菜单事件
$('#mm').menu({
onShow: function(){
log('菜单已显示');
},
onHide: function(){
log('菜单已隐藏');
},
onClick: function(item){
log('点击了菜单项: ' + item.text + ' (name: ' + item.name + ')');
}
});
});
function showMenu(){
$('#mm').menu('show', {
left: 0,
top: 50
});
}
function hideMenu(){
$('#mm').menu('hide');
}
function appendMenuItem(){
var itemName = '动态添加' + new Date().getTime();
$('#mm').menu('appendItem', {
text: itemName,
iconCls: 'icon-add',
name: itemName,
onclick: function(){
log('执行动态添加的菜单项操作: ' + itemName);
}
});
log('已添加菜单项: ' + itemName);
}
function insertMenuItem(){
var itemName = '动态插入' + new Date().getTime();
$('#mm').menu('insertItem', {
item: {
text: itemName,
iconCls: 'icon-edit',
name: itemName,
onclick: function(){
log('执行动态插入的菜单项操作: ' + itemName);
}
},
index: 1 // 插入到第二个位置
});
log('已插入菜单项: ' + itemName);
}
function updateMenuItem(){
var item = $('#mm').menu('findItem', '新建');
if (item){
$('#mm').menu('setItem', {
target: item.target,
text: '新建文件',
iconCls: 'icon-fileadd'
});
log('已修改菜单项: 新建 -> 新建文件');
} else {
log('未找到要修改的菜单项');
}
}
function removeMenuItem(){
var item = $('#mm').menu('findItem', '重做');
if (item){
$('#mm').menu('removeItem', item.target);
log('已删除菜单项: 重做');
} else {
log('未找到要删除的菜单项');
}
}
function enableMenuItem(){
var item = $('#mm').menu('findItem', '保存');
if (item){
$('#mm').menu('enableItem', item.target);
log('已启用菜单项: 保存');
} else {
log('未找到要启用的菜单项');
}
}
function disableMenuItem(){
var item = $('#mm').menu('findItem', '保存');
if (item){
$('#mm').menu('disableItem', item.target);
log('已禁用菜单项: 保存');
} else {
log('未找到要禁用的菜单项');
}
}
function log(message){
var $log = $('#log');
var time = new Date().toLocaleTimeString();
$log.append('<div>[' + time + '] ' + message + '</div>');
$log.scrollTop($log[0].scrollHeight);
}
function clearLog(){
$('#log').empty();
}
</script>
</body>
</html>

复制代码

6. 响应式设计

响应式菜单的概念

响应式设计是指网页能够根据不同的设备屏幕大小自动调整布局和功能，以提供最佳的用户体验。对于水平菜单而言，响应式设计意味着在桌面设备上显示为完整的水平菜单，而在移动设备上可能会转换为汉堡菜单或其他更适合小屏幕的形式。

实现方法

实现jQuery EasyUI水平菜单的响应式设计，可以采用以下几种方法：

1.

使用CSS媒体查询：
“`css
/* 桌面设备样式 */
@media (min-width: 768px) {
#menu {
display: block;
}
#hamburger-menu {
display: none;
}
}

复制代码

/* 移动设备样式 */
@media (max-width: 767px) {

#menu {
display: none;
}
#hamburger-menu {
display: block;
}

复制代码

}

2. **使用JavaScript检测屏幕宽度**：
```javascript
$(window).resize(function() {
if ($(window).width() < 768) {
// 移动设备逻辑
$('#menu').hide();
$('#hamburger-menu').show();
} else {
// 桌面设备逻辑
$('#menu').show();
$('#hamburger-menu').hide();
}
});

复制代码

1.

使用EasyUI的响应式插件：$('#menu').menu({
responsive: true,
breakpoint: 768,
mobileMenu: $('#hamburger-menu')
});

复制代码

$('#menu').menu({
responsive: true,
breakpoint: 768,
mobileMenu: $('#hamburger-menu')
});

复制代码

响应式菜单示例

下面是一个完整的响应式菜单示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 响应式水平菜单示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #f5f5f5;
padding: 10px;
position: relative;
}
.logo {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
.menu-container {
display: inline-block;
vertical-align: middle;
width: calc(100% - 120px);
}
.hamburger {
display: none;
float: right;
cursor: pointer;
padding: 5px;
}
.content {
padding: 20px;
}
/* 桌面设备样式 */
@media (min-width: 768px) {
#horizontal-menu {
display: block;
}
#vertical-menu {
display: none;
}
.hamburger {
display: none;
}
}
/* 移动设备样式 */
@media (max-width: 767px) {
#horizontal-menu {
display: none;
}
#vertical-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background-color: #fff;
border: 1px solid #ddd;
}
.hamburger {
display: block;
}
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="https://www.jeasyui.com/images/logo.png" alt="Logo" height="30">
</div>
<div class="menu-container">
<div id="horizontal-menu" class="easyui-menu" style="width:100%;" data-options="mode:'horizontal'">
<div data-options="name:'home', iconCls:'icon-house'">
<span>首页</span>
</div>
<div data-options="name:'products', iconCls:'icon-ok'">
<span>产品</span>
<div style="width:150px;">
<div data-options="name:'product1'">产品1</div>
<div data-options="name:'product2'">产品2</div>
<div data-options="name:'product3'">产品3</div>
</div>
</div>
<div data-options="name:'services', iconCls:'icon-tip'">
<span>服务</span>
<div style="width:150px;">
<div data-options="name:'service1'">服务1</div>
<div data-options="name:'service2'">服务2</div>
</div>
</div>
<div data-options="name:'about', iconCls:'icon-search'">
<span>关于我们</span>
</div>
<div data-options="name:'contact', iconCls:'icon-man'">
<span>联系我们</span>
</div>
</div>
<div id="vertical-menu" class="easyui-menu" style="width:150px;">
<div data-options="name:'home', iconCls:'icon-house'">
<span>首页</span>
</div>
<div data-options="name:'products', iconCls:'icon-ok'">
<span>产品</span>
<div>
<div data-options="name:'product1'">产品1</div>
<div data-options="name:'product2'">产品2</div>
<div data-options="name:'product3'">产品3</div>
</div>
</div>
<div data-options="name:'services', iconCls:'icon-tip'">
<span>服务</span>
<div>
<div data-options="name:'service1'">服务1</div>
<div data-options="name:'service2'">服务2</div>
</div>
</div>
<div data-options="name:'about', iconCls:'icon-search'">
<span>关于我们</span>
</div>
<div data-options="name:'contact', iconCls:'icon-man'">
<span>联系我们</span>
</div>
</div>
<div class="hamburger" onclick="toggleMobileMenu()">
<span class="easyui-linkbutton" data-options="iconCls:'icon-menu'"></span>
</div>
</div>
</div>
<div class="content">
<h2>响应式菜单示例</h2>
<p>调整浏览器窗口大小，查看菜单在不同屏幕尺寸下的表现。</p>
<p>在桌面设备上，菜单显示为水平菜单；在移动设备上，菜单转换为汉堡菜单。</p>
</div>
<script>
$(function(){
// 初始化菜单事件
$('#horizontal-menu, #vertical-menu').menu({
onClick: function(item){
alert('点击了菜单项: ' + item.text);
}
});
// 监听窗口大小变化
$(window).resize(function() {
if ($(window).width() < 768) {
// 移动设备
$('#horizontal-menu').hide();
$('#vertical-menu').hide();
} else {
// 桌面设备
$('#horizontal-menu').show();
$('#vertical-menu').hide();
}
});
});
function toggleMobileMenu() {
$('#vertical-menu').toggle();
if ($('#vertical-menu').is(':visible')) {
$('#vertical-menu').menu('show', {
left: 0,
top: $('.header').height()
});
}
}
</script>
</body>
</html>

复制代码

7. 项目实战技巧与注意事项

性能优化

在实际项目中，为了提高菜单的性能和用户体验，可以考虑以下优化技巧：

1.

延迟加载子菜单：
“`javascript
$(‘#menu’).menu({
onShow: function(){
// 只有在显示菜单时才加载子菜单数据
loadSubMenuData();
}
});

复制代码

function loadSubMenuData() {

// 使用AJAX加载子菜单数据
$.ajax({
url: '/api/submenu',
type: 'GET',
success: function(data) {
// 处理返回的数据并更新菜单
updateMenuWithNewData(data);
}
});

复制代码

}

2. **菜单项缓存**：
```javascript
// 缓存菜单项，避免重复查询DOM
var menuItemsCache = {};
function getMenuItem(name) {
if (!menuItemsCache[name]) {
menuItemsCache[name] = $('#menu').menu('findItem', name);
}
return menuItemsCache[name];
}

复制代码

1.

使用事件委托：// 使用事件委托而不是为每个菜单项单独绑定事件
$('#menu').on('click', '.menu-item', function() {
var itemName = $(this).data('name');
handleMenuItemClick(itemName);
});

复制代码

// 使用事件委托而不是为每个菜单项单独绑定事件
$('#menu').on('click', '.menu-item', function() {
var itemName = $(this).data('name');
handleMenuItemClick(itemName);
});

复制代码

常见问题及解决方案

1. 菜单在移动设备上显示不正常：问题：在移动设备上，水平菜单可能会超出屏幕宽度或显示不完整。解决方案：实现响应式设计，在小屏幕上将水平菜单转换为汉堡菜单或垂直菜单。
2. 问题：在移动设备上，水平菜单可能会超出屏幕宽度或显示不完整。
3. 解决方案：实现响应式设计，在小屏幕上将水平菜单转换为汉堡菜单或垂直菜单。
4.

子菜单被其他元素遮挡：问题：子菜单可能被页面上的其他元素遮挡，导致无法正常显示或点击。解决方案：增加菜单的z-index值，确保菜单显示在最上层。$('#menu').menu({
zIndex: 9999
});

复制代码

5. 问题：子菜单可能被页面上的其他元素遮挡，导致无法正常显示或点击。
6.

解决方案：增加菜单的z-index值，确保菜单显示在最上层。$('#menu').menu({
zIndex: 9999
});

复制代码

7.

菜单项点击事件不触发：问题：点击菜单项时，绑定的点击事件没有触发。解决方案：检查菜单项是否被禁用，或者事件绑定是否正确。
“`javascript
// 确保菜单项未被禁用
$(‘#menu’).menu(‘enableItem’, item.target);// 正确绑定点击事件
$(‘#menu’).menu({onClick: function(item) {
// 处理点击事件
}});
“`

复制代码

8. 问题：点击菜单项时，绑定的点击事件没有触发。
9.

解决方案：检查菜单项是否被禁用，或者事件绑定是否正确。
“`javascript
// 确保菜单项未被禁用
$(‘#menu’).menu(‘enableItem’, item.target);

复制代码

10.

动态添加的菜单项样式不正确：问题：动态添加的菜单项可能没有应用正确的样式。解决方案：在添加菜单项后，调用EasyUI的解析方法。$('#menu').menu('appendItem', {
text: '新菜单项'
});
$.parser.parse('#menu'); // 重新解析菜单

复制代码

11. 问题：动态添加的菜单项可能没有应用正确的样式。
12.

解决方案：在添加菜单项后，调用EasyUI的解析方法。$('#menu').menu('appendItem', {
text: '新菜单项'
});
$.parser.parse('#menu'); // 重新解析菜单

复制代码

菜单在移动设备上显示不正常：

• 问题：在移动设备上，水平菜单可能会超出屏幕宽度或显示不完整。
• 解决方案：实现响应式设计，在小屏幕上将水平菜单转换为汉堡菜单或垂直菜单。

子菜单被其他元素遮挡：

• 问题：子菜单可能被页面上的其他元素遮挡，导致无法正常显示或点击。
•

解决方案：增加菜单的z-index值，确保菜单显示在最上层。$('#menu').menu({
zIndex: 9999
});

复制代码

$('#menu').menu({
zIndex: 9999
});

复制代码

菜单项点击事件不触发：

• 问题：点击菜单项时，绑定的点击事件没有触发。
•

解决方案：检查菜单项是否被禁用，或者事件绑定是否正确。
“`javascript
// 确保菜单项未被禁用
$(‘#menu’).menu(‘enableItem’, item.target);

复制代码

// 正确绑定点击事件
$(‘#menu’).menu({

onClick: function(item) {
// 处理点击事件
}

复制代码

});
“`

动态添加的菜单项样式不正确：

• 问题：动态添加的菜单项可能没有应用正确的样式。
•

解决方案：在添加菜单项后，调用EasyUI的解析方法。$('#menu').menu('appendItem', {
text: '新菜单项'
});
$.parser.parse('#menu'); // 重新解析菜单

复制代码

$('#menu').menu('appendItem', {
text: '新菜单项'
});
$.parser.parse('#menu'); // 重新解析菜单

复制代码

最佳实践

1.

使用语义化的HTML结构：<nav id="main-menu" class="easyui-menu" data-options="mode:'horizontal'">
<div data-options="name:'home'">首页</div>
<div data-options="name:'products'">产品</div>
<div data-options="name:'services'">服务</div>
<div data-options="name:'about'">关于我们</div>
</nav>

复制代码

2.

分离数据和视图：
“`javascript
// 从服务器获取菜单数据
$.ajax({
url: ‘/api/menu’,
type: ‘GET’,
success: function(data) {// 使用数据渲染菜单
renderMenu(data);}
});

复制代码

使用语义化的HTML结构：

<nav id="main-menu" class="easyui-menu" data-options="mode:'horizontal'">
<div data-options="name:'home'">首页</div>
<div data-options="name:'products'">产品</div>
<div data-options="name:'services'">服务</div>
<div data-options="name:'about'">关于我们</div>
</nav>

复制代码

分离数据和视图：
“`javascript
// 从服务器获取菜单数据
$.ajax({
url: ‘/api/menu’,
type: ‘GET’,
success: function(data) {

// 使用数据渲染菜单
renderMenu(data);

复制代码

}
});

function renderMenu(menuData) {

$('#menu').menu({
data: menuData
});

复制代码

}

3. **使用命名空间避免冲突**：
```javascript
// 使用命名空间
var MyApp = MyApp || {};
MyApp.Menu = {
init: function() {
this.bindEvents();
},
bindEvents: function() {
$('#menu').menu({
onClick: this.handleItemClick
});
},
handleItemClick: function(item) {
// 处理菜单项点击
}
};
// 初始化菜单
$(function() {
MyApp.Menu.init();
});

复制代码

1.

提供键盘导航支持：
“`javascript\((document).keydown(function(e) {
if (\)(‘#menu’).is(‘:visible’)) {
switch(e.keyCode) {
case 27: // ESC键
$(‘#menu’).menu(‘hide’);
break;
case 37: // 左箭头
navigateMenu(‘left’);
break;
case 38: // 上箭头
navigateMenu(‘up’);
break;
case 39: // 右箭头
navigateMenu(‘right’);
break;
case 40: // 下箭头
navigateMenu(‘down’);
break;
}
}
});

复制代码

function navigateMenu(direction) {

// 实现菜单导航逻辑

复制代码

}

5. **添加适当的动画效果**：
```javascript
$('#menu').menu({
duration: 200, // 设置动画持续时间
onShow: function() {
$(this).fadeIn(200);
},
onHide: function() {
$(this).fadeOut(200);
}
});

复制代码

项目实战示例

下面是一个综合运用上述技巧和最佳实践的项目实战示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 水平菜单项目实战示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #f5f5f5;
padding: 10px;
position: relative;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.logo {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
.menu-container {
display: inline-block;
vertical-align: middle;
width: calc(100% - 120px);
}
.hamburger {
display: none;
float: right;
cursor: pointer;
padding: 5px;
}
.content {
padding: 20px;
}
.status-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f5f5f5;
padding: 5px 10px;
border-top: 1px solid #ddd;
font-size: 12px;
color: #666;
}
/* 桌面设备样式 */
@media (min-width: 768px) {
#horizontal-menu {
display: block;
}
#vertical-menu {
display: none;
}
.hamburger {
display: none;
}
}
/* 移动设备样式 */
@media (max-width: 767px) {
#horizontal-menu {
display: none;
}
#vertical-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.hamburger {
display: block;
}
}
/* 自定义菜单样式 */
.custom-menu .menu-text {
padding-left: 5px;
}
.custom-menu .menu-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="https://www.jeasyui.com/images/logo.png" alt="Logo" height="30">
</div>
<div class="menu-container">
<div id="horizontal-menu" class="easyui-menu custom-menu" style="width:100%;" data-options="mode:'horizontal'"></div>
<div id="vertical-menu" class="easyui-menu custom-menu" style="width:150px;"></div>
<div class="hamburger" onclick="toggleMobileMenu()">
<span class="easyui-linkbutton" data-options="iconCls:'icon-menu'"></span>
</div>
</div>
</div>
<div class="content">
<h2>项目实战示例</h2>
<p>这是一个综合运用jQuery EasyUI水平菜单各种特性的项目实战示例。</p>
<p>特点：</p>
<ul>
<li>响应式设计，适配不同屏幕尺寸</li>
<li>动态加载菜单数据</li>
<li>键盘导航支持</li>
<li>性能优化</li>
<li>最佳实践应用</li>
</ul>
<h3>操作说明</h3>
<p>1. 点击菜单项查看响应</p>
<p>2. 调整浏览器窗口大小，查看响应式效果</p>
<p>3. 在移动设备模式下，点击汉堡菜单显示垂直菜单</p>
<p>4. 使用键盘方向键和ESC键进行菜单导航</p>
</div>
<div class="status-bar" id="status-bar">
就绪
</div>
<script>
// 使用命名空间
var MyApp = MyApp || {};
MyApp.Menu = {
// 菜单数据
menuData: [
{
text: '首页',
name: 'home',
iconCls: 'icon-house'
},
{
text: '产品',
name: 'products',
iconCls: 'icon-ok',
children: [
{
text: '产品1',
name: 'product1'
},
{
text: '产品2',
name: 'product2'
},
{
text: '产品3',
name: 'product3'
}
]
},
{
text: '服务',
name: 'services',
iconCls: 'icon-tip',
children: [
{
text: '服务1',
name: 'service1'
},
{
text: '服务2',
name: 'service2'
}
]
},
{
text: '关于我们',
name: 'about',
iconCls: 'icon-search'
},
{
text: '联系我们',
name: 'contact',
iconCls: 'icon-man'
}
],
// 菜单项缓存
menuItemsCache: {},
// 初始化
init: function() {
this.renderMenus();
this.bindEvents();
this.setupKeyboardNavigation();
this.updateStatus('菜单初始化完成');
},
// 渲染菜单
renderMenus: function() {
// 渲染水平菜单
$('#horizontal-menu').menu({
data: this.menuData,
duration: 200,
onClick: this.handleItemClick,
onShow: function() {
MyApp.Menu.updateStatus('菜单已显示');
},
onHide: function() {
MyApp.Menu.updateStatus('菜单已隐藏');
}
});
// 渲染垂直菜单
$('#vertical-menu').menu({
data: this.menuData,
duration: 200,
onClick: this.handleItemClick,
onShow: function() {
MyApp.Menu.updateStatus('移动菜单已显示');
},
onHide: function() {
MyApp.Menu.updateStatus('移动菜单已隐藏');
}
});
},
// 绑定事件
bindEvents: function() {
// 监听窗口大小变化
$(window).resize(this.handleResize);
// 初始调整
this.handleResize();
},
// 设置键盘导航
setupKeyboardNavigation: function() {
$(document).keydown(function(e) {
var $menu = $('#horizontal-menu').is(':visible') ? $('#horizontal-menu') : $('#vertical-menu');
if ($menu.is(':visible')) {
switch(e.keyCode) {
case 27: // ESC键
$menu.menu('hide');
MyApp.Menu.updateStatus('菜单已关闭');
break;
case 37: // 左箭头
MyApp.Menu.navigateMenu('left');
break;
case 38: // 上箭头
MyApp.Menu.navigateMenu('up');
break;
case 39: // 右箭头
MyApp.Menu.navigateMenu('right');
break;
case 40: // 下箭头
MyApp.Menu.navigateMenu('down');
break;
}
}
});
},
// 菜单导航
navigateMenu: function(direction) {
this.updateStatus('菜单导航: ' + direction);
// 实际项目中，这里应该实现具体的导航逻辑
},
// 处理窗口大小变化
handleResize: function() {
if ($(window).width() < 768) {
// 移动设备
$('#horizontal-menu').hide();
$('#vertical-menu').hide();
MyApp.Menu.updateStatus('切换到移动设备模式');
} else {
// 桌面设备
$('#horizontal-menu').show();
$('#vertical-menu').hide();
MyApp.Menu.updateStatus('切换到桌面设备模式');
}
},
// 处理菜单项点击
handleItemClick: function(item) {
MyApp.Menu.updateStatus('点击了菜单项: ' + item.text + ' (name: ' + item.name + ')');
// 实际项目中，这里应该根据点击的菜单项执行相应的操作
},
// 获取菜单项（带缓存）
getMenuItem: function(name) {
if (!this.menuItemsCache[name]) {
var item = $('#horizontal-menu').menu('findItem', name);
if (!item) {
item = $('#vertical-menu').menu('findItem', name);
}
this.menuItemsCache[name] = item;
}
return this.menuItemsCache[name];
},
// 更新状态栏
updateStatus: function(message) {
var time = new Date().toLocaleTimeString();
$('#status-bar').text('[' + time + '] ' + message);
}
};
// 切换移动菜单
function toggleMobileMenu() {
$('#vertical-menu').toggle();
if ($('#vertical-menu').is(':visible')) {
$('#vertical-menu').menu('show', {
left: 0,
top: $('.header').height()
});
MyApp.Menu.updateStatus('显示移动菜单');
} else {
MyApp.Menu.updateStatus('隐藏移动菜单');
}
}
// 初始化应用
$(function() {
MyApp.Menu.init();
});
</script>
</body>
</html>

复制代码

8. 总结

jQuery EasyUI的水平菜单组件是一个功能强大、易于使用的导航解决方案。通过本文的详细介绍，我们从基础入门到高级应用，全面了解了jQuery EasyUI水平菜单的各个方面：

1. 基础入门：我们学习了如何创建基本的水平菜单，包括必要的HTML结构和简单的配置。
2. 配置选项：深入了解了菜单的各种配置选项，包括基本配置和高级配置，以及如何根据项目需求进行灵活配置。
3. 事件处理：掌握了菜单的各种事件及其处理方法，学习了如何响应用户的交互行为。
4. 动态菜单创建：学习了如何动态添加、修改和删除菜单项，以满足动态变化的应用需求。
5. 响应式设计：了解了如何实现响应式菜单，使菜单能够适应不同设备和屏幕尺寸。
6. 项目实战技巧与注意事项：通过实际项目示例，学习了性能优化、常见问题解决方案和最佳实践。

基础入门：我们学习了如何创建基本的水平菜单，包括必要的HTML结构和简单的配置。

配置选项：深入了解了菜单的各种配置选项，包括基本配置和高级配置，以及如何根据项目需求进行灵活配置。

事件处理：掌握了菜单的各种事件及其处理方法，学习了如何响应用户的交互行为。

动态菜单创建：学习了如何动态添加、修改和删除菜单项，以满足动态变化的应用需求。

响应式设计：了解了如何实现响应式菜单，使菜单能够适应不同设备和屏幕尺寸。

项目实战技巧与注意事项：通过实际项目示例，学习了性能优化、常见问题解决方案和最佳实践。

在实际项目中，合理运用jQuery EasyUI水平菜单的各种特性和技巧，可以创建出功能丰富、用户体验良好的导航系统。同时，结合响应式设计和性能优化，可以确保菜单在各种设备和环境下都能正常工作，提供一致的用户体验。

希望本文能够帮助读者全面掌握jQuery EasyUI水平菜单的使用方法，并在实际项目中灵活应用，创建出优秀的Web应用程序。

版权声明

1、转载或引用本网站内容(jQuery EasyUI水平菜单使用方法从入门到精通详细讲解配置选项事件处理动态菜单创建响应式设计以及项目实战中的技巧与注意事项)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://www.pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://www.pixtech.cc/thread-36818-1-1.html

	通知：是的！我们正在计划一个大动作！	11-02 12:46
	通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～	10-23 09:32
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！	10-23 09:31
	通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq	10-23 09:28
	通知：签到时间调整为每日4:00（东八区）	10-23 09:26

活动公告

jQuery EasyUI水平菜单使用方法从入门到精通详细讲解配置选项事件处理动态菜单创建响应式设计以及项目实战中的技巧与注意事项

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

版权声明

三倍冰淇淋

无人之境【一阶】

财Doro

小樱（小丑装）

立华奏

以外的星空【二阶】

⑨的冰沙

友情链接

频道订阅

加入社群