---

jQuery EasyUI 菜单与按钮 - 创建简单的菜单

介绍

EasyUI是一种基于jQuery的开源Javascript框架，提供了丰富多样的组件和UI效果，且易于学习和使用。其中菜单和按钮是常用的UI组件，可用于创建导航栏和操作按钮等。

本文介绍如何使用EasyUI创建简单的菜单和按钮，并提供相关的代码示例。

创建菜单

要创建一个菜单，需要使用EasyUI提供的menu组件。以下是创建一个简单的菜单的步骤：

步骤1 - 引入EasyUI库和CSS

首先，在页面的head标签中引入EasyUI的jQuery、EasyUI库和EasyUI的CSS文件，例如：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

步骤2 - 创建HTML代码

在页面的body标签中，添加以下HTML代码来定义菜单的容器和菜单项：

<div id="mm" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-save'">保存</div>
    <div data-options="iconCls:'icon-cut'">剪切</div>
    <div data-options="iconCls:'icon-copy'">复制</div>
    <div data-options="iconCls:'icon-paste'">粘贴</div>
    <div class="menu-sep"></div>
    <div>其他操作</div>
    <div>其他操作</div>
</div>

这里定义了一个ID为mm的div元素，并将其设置为菜单容器。其中，数据选项（data-options）可以设置菜单项的样式和其他属性，如图标。

步骤3 - 初始化菜单

通过JavaScript代码，使用EasyUI的menu组件来初始化菜单：

$('#mm').menu();

至此，一个简单的菜单已经创建完成！

创建按钮

要创建一个按钮，需要使用EasyUI提供的linkbutton组件。以下是创建一个带有点击事件的按钮的步骤：

步骤1 - 引入EasyUI库和CSS

和创建菜单一样，首先在页面的head标签中引入EasyUI的jQuery、EasyUI库和EasyUI的CSS文件。

步骤2 - 创建HTML代码

在页面的body标签中，添加以下HTML代码来定义按钮：

<a href="#" class="easyui-linkbutton" id="btn" data-options="iconCls:'icon-add'">添加</a>

这里定义了一个ID为btn的a标签，并将其设置为按钮。数据选项（data-options）可以设置按钮的样式和其他属性，如图标。

步骤3 - 添加点击事件

通过JavaScript代码，使用EasyUI的linkbutton组件来初始化并添加点击事件：

$('#btn').linkbutton({
    onClick: function(){
        // 执行点击事件的操作
    }
});

至此，一个带有点击事件的按钮已经创建完成！

总结

通过使用EasyUI的menu和linkbutton组件，创建菜单和按钮变得非常简单。使用这两种组件可以构建出各种UI界面，提高用户体验和页面的交互性。