2.4 菜单和按钮
2.4.1 菜单（Menu）
菜单由菜单域与菜单元素组成，一个菜单域内有多个菜单元素，每一个菜单元素都拥有相关的属性，而菜单域也拥有属性、事件以及方法，菜单的创建较为麻烦，但是使用却很简单，本节将先介绍菜单元素的用法再详细介绍菜单域的用法。
菜单的默认配置定义在$.fn.menu.defaults中。
1. 创建菜单
第一步需要创建一个菜单区域，并根据页面需要设置菜单区域的宽度，我们可以通过在class中增加easyui-menu属性来创建菜单区域，代码如下：
01 <div class="easyui-menu" style="width:150px;" id=’mm’> 02 菜单区域… 03 </div>
第二步需要设置菜单元素，可以通过在菜单域中添加<div>标签来创建菜单元素，代码如下：
01 <div class="easyui-menu" style="width:150px;"> 02 <div>菜单元素1</div> 03 <div>菜单元素2</div> 04 <div>菜单元素3</div> 05 </div>
第三步需要通过JavaScript初始化菜单域，代码如下：
$('#mm').menu();
第四步是显示菜单区域，菜单区域创建完成后默认是不显示的，开发人员需要通过如下代码显示菜单：
01 $('#mm').menu('show', {
02 left: 200,
03 top: 100
04 });
2. 菜单元素
菜单元素的属性见表2.23。
表2.23 菜单元素的属性
我们可以给菜单元素添加一个图标和单击事件，代码如下：
<div data-options="iconCls:'icon-save'" onclick="alert('1111');">保存</div>
菜单元素本身也可以作为一个菜单域，可以在菜单元素中添加新的菜单元素，此时就可以创建二级菜单，如下代码所示。
01 <div id="mm" class="easyui-menu" > 02 <div>菜单元素一</div> 03 <div> 04 <span>二级菜单</span> 05 <div > 06 <div>二级菜单元素1</div> 07 <div>二级菜单元素2</div> 08 </div> 09 </div> 10 <div>菜单元素二</div> 11 <div>菜单元素三</div> 12 </div>
提示
由于每一个菜单元素都可以作为一个菜单域，因此我们可以根据需要创建任意多级菜单。
菜单元素也可以作为一个菜单分隔符，例如下面的代码可以创建一个菜单分隔符：
<div class="menu-sep"></div>
3. 菜单域的属性
菜单域常用属性的说明见表2.24。
表2.24 菜单域常用属性
inline属性设置菜单是否为内联菜单。所谓的内联，就是指显示位置是否以其父元素的起点为起点，例如：
01 <style>
02 #border{
03 border-style: solid;
04 border-width: 1px;
05 height: 100px;
06 width: 200px;
07 margin-left:500px;
08 margin-top:200px;
09 }
10 </style>
11 <div id="border">
12 <div id="mm" class="easyui-menu" >
13 <div>菜单元素一</div>>
14 <div>菜单元素二</div>
15 <div>菜单元素三</div>
16 </div>
17 </div>
18 <script>
19 $('#mm').menu({
20 inline:true
21 });
22 $('#mm').menu('show', {
23 left: 200,
24 top: 100
25 });
26 </script>
最终运行结果如图2.16所示。
图2.16 内联菜单
4. 菜单域的事件
菜单域常用事件的说明见表2.25。
表2.25 菜单域常用事件
当菜单域内有菜单元素被单击时会触发onClick事件。onClick事件参数item为被单击的菜单元素对象，可以通过item.name或者item.id来获取被单击元素的name和id属性。例如，下面的代码当菜单元素一被单击时会显示该菜单元素名称，开发者可以使用该事件为菜单域内的各类菜单元素添加不同的处理逻辑：
01 <div id="mm" class="easyui-menu" >
02 <div name='菜单元素1'>菜单元素一</div>
03 <div>菜单元素二</div>
04 <div>菜单元素三</div>
05 </div>
06 <script>
07 $('#mm').menu({
08 onClick:function(item){
09 alert(item.name);
10 }
11 });
12 $('#mm').menu('show', {
13 left: 200,
14 top: 100
15 });
16 </script>
5. 菜单域的方法
菜单域常用方法的说明见表2.26。
表2.26 菜单域常用方法
掌握菜单域的使用方法前，读者首先应该了解itemEl参数的含义，它指的是一个菜单元素对象，我们可以通过如下方法获取菜单元素对象：
01 <div id="mm" class="easyui-menu" >
02 <div id='m1'>菜单元素一</div>
03 <div>菜单元素二</div>
04 <div>菜单元素三</div>
05 </div>
06 <script>
07 var itemEl = $('#m1'); //获取菜单元素一对象
08 </script>
findItem可以根据菜单元素名称获取菜单元素对象。
setText可以更改指定的菜单元素名称。
setText的参数param包含两个属性，第一个为target属性，它是指定的菜单元素的DOM对象；另一个为text属性，它是更改后的菜单元素名称，例如我们可以重新设置菜单元素的名称，部分代码如下：
01 var item = $('#mm').menu('findItem', '菜单元素一');
02 $('#mm').menu('setText', {
03 target: item.target,
04 text: '菜单元素新'
05 });
setIcon的参数param包含两个属性，第一个为target属性，它是指定的菜单元素的DOM对象，另一个为iconCls属性，它为指定图标的类型。我们可以使用该方法设置菜单元素的图标，部分代码如下：
01 $('#mm').menu('setIcon', {
02 target: $('#mm').menu('findItem', '菜单元素一'),
03 iconCls: 'icon-closed'
04 });
2.4.2 链接按钮（LinkButton）
链接按钮由一个<a>标签表示，它可以同时显示文本和图标，也可以只显示其中的一个，链接按钮的宽度会根据文本的长度自动适应。链接按钮可以直接跳转页面，也可以通过程序获取其单击事件后进行相关逻辑处理。
链接按钮的默认配置定义在$.fn.linkbutton.defaults中。
1. 创建链接按钮
使用标记创建链接按钮的方法如下：
<a id="btn" href="#" class="easyui-linkbutton">链接按钮</a>
通过JavaScript创建链接按钮的方法如下：
01 <a id="btn" href="#">链接按钮</a>
02 $('#btn').linkbutton();
2. 链接按钮属性
链接按钮常用属性的说明见表2.27。
表2.27 链接按钮常用属性
链接按钮属性的详细介绍如图2.17所示。
图2.17 链接按钮属性介绍
3. 链接按钮事件
链接按钮常用事件说明见表2.28。
表2.28 链接按钮常用事件
4. 链接按钮方法
链接按钮常用方法说明见表2.29。
表2.29 链接按钮常用方法
链接按钮方法的使用非常简单，如下代码可以调整链接按钮的尺寸：
01 $('#btn').linkbutton('resize', {
02 width: '100%',
03 height: 32
04 });
5. 处理链接按钮上的单击事件
链接按钮的主要作用就是在其被单击后可以处理一系列的事务，有些链接按钮被单击后需要直接跳转到一个新的页面，例如：
<a id="btn" href="test.html" class="easyui-linkbutton">链接按钮</a>
大部分的链接按钮在被单击后需要处理一系列的逻辑，例如表单中的提交按钮被单击后，需要判断用户的输入是否验证通过，此时我们需要通过程序来获取单击事件，例如：
01 $('#btn').click(function(){
02 alert('easyui');
03 });
我们也可以使用链接按钮提供的单击事件方法，例如：
01 $('#btn').linkbutton({
02 iconCls: 'icon-search',
03 onClick:function(){
04 alert('easyui');
05 }
06 });
6. 链接按钮组
我们通常会将一组关联的链接按钮分到一组中，当链接按钮被分组后，用户每次只能选中链接按钮组中的一个按钮，例如：
01 <div>
02 <a id="btn1" href="#">链接按钮1</a>
03 <a id="btn3" href="#">链接按钮2</a>
04 <a id="btn2" href="#">链接按钮3</a>
05 </div>
06 <script>
07 $(function(){
08 $('#btn1').linkbutton({
09 toggle:true,
10 group:"btn-group"
11 });
12 $('#btn2').linkbutton({
13 toggle:true,
14 group:"btn-group"
15 });
16 $('#btn3').linkbutton({
17 toggle:true,
18 group:"btn-group"
19 });
20 });
21 </script>
最终运行结果如图2.18所示。
图2.18 链接按钮组
2.4.3 菜单按钮（MenuButton）
上一节我们讲解了链接按钮的使用方法。链接按钮是一个基础按钮，它用于被单击后处理一系列的事务，但是在实际开发中特别是在列表中往往需要用到大量的链接按钮，例如某个页面显示10条用户的基本信息，每个用户的基本信息后面都需要有查看、编辑、删除这三个链接按钮，那么整个页面至少需要用到30个链接按钮。使用菜单按钮可以减少页面实际的按钮数量，它仅显示一个链接按钮，当链接按钮被单击后会在其下方显示一个菜单。
菜单按钮的依赖关系如下：
- linkbutton
- menu
菜单按钮扩展于：
- linkbutton
菜单按钮的默认配置定义在$.fn.menubutton.defaults中。
1. 创建菜单按钮
创建菜单按钮时需要创建一个菜单按钮和一个菜单，并且设置菜单按钮的menu属性为菜单的一个选择器。
提示
所谓的选择器就是如何选中某个元素，可以通过元素的id来选择此时的写法为#xx，也可以根据元素的class来选择写法为.xx。还有一些高级的选择器就不在这里介绍了，详细情况请查看jQuery选择器。
通过标记创建菜单按钮的方法如下：
01 <a href="JavaScript:void(0)" id="mb" class="easyui-menubutton" 02 data-options="menu:'#mm',iconCls:'icon-edit'">编辑</a> 03 <div id="mm" style="width:150px;"> 04 <div>详情</div> 05 <div>修改</div> 06 <div>删除</div> 07 </div>
通过JavaScript创建菜单按钮的方法如下：
01 <a href="JavaScript:void(0)" id="mb" >编辑</a>
02 <div id="mm" style="width:150px;">
03 <div>详情</div>
04 <div>修改</div>
05 <div>删除</div>
06 </div>
07 <script>
08 $(function(){
09 $('#mb').menubutton({
10 iconCls: 'icon-edit',
11 menu:'#mm'
12 });
13 });
14 </script>
此时我们就创建了一个菜单按钮，当将鼠标放到编辑按钮上时，会在按钮下方显示一个菜单，运行效果如图2.19所示。
图2.19 菜单按钮显示效果
2. 菜单按钮属性
菜单按钮常用的属性见表2.30。
表2.30 菜单按钮的常用属性
3. 菜单按钮事件
菜单按钮本身无新增和重写事件。
4. 菜单按钮方法
菜单按钮常用方法见表2.31。
表2.31 菜单按钮的常用方法
2.4.4 分割按钮（SplitButton）
分割按钮与菜单按钮一样都是由链接按钮和菜单组成的，不同的是当鼠标移动到菜单按钮任意位置上时会显示一个菜单，只有当鼠标移动到分割按钮右侧的图标上时才会显示菜单。也就是说，使用分割按钮可以直接单击处理事务而不需要显示菜单。例如，我们上一节展示的一个菜单按钮，它有详情、修改、删除这三个功能，通过编辑文本来提示用户单击并显示菜单，但是对于用户来说详情功能用得最多，而修改、删除功能极少使用，这时我们更希望菜单按钮单击后，可以直接跳转到详情页面而不是显示菜单，分割按钮就是为了这一问题而设计的。
分割按钮的依赖关系如下：
- menubutton
分割按钮扩展于：
- menubutton
分割按钮的默认配置定义在$.fn.splitbutton.defaults中。
1. 创建分割按钮
通过标记创建分割按钮的方法如下：
01 <a href="JavaScript:void(0)" id="mb" class="easyui-splitbutton" 02 data-options="menu:'#mm'">详情</a> 03 <div id="mm" style="width:150px;"> 04 <div>详情</div> 05 <div>修改</div> 06 <div>删除</div> 07 </div>
通过JavaScript创建分割按钮的方法如下：
01 <a href="JavaScript:void(0)" id="mb" >编辑</a>
02 <div id="mm" style="width:150px;">
03 <div>详情</div>
04 <div>修改</div>
05 <div>删除</div>
06 </div>
07 <script>
08 $(function(){
09 $('#mb').splitbutton({
10 menu:'#mm',,
11 onClick:function(){
12 //处理详情功能业务
13 }
14 });
15 });
16 </script>
2. 分割按钮属性
分割按钮常用属性见表2.32。
表2.32 分割按钮的常用属性
3. 分割按钮事件
分割按钮本身无新增和重写事件。
4. 分割按钮方法
分割按钮常用方法见表2.33。
表2.33 分割按钮的常用方法
2.4.5 切换按钮（SwitchButton）
切换按钮通常用来提供两种状态的切换，例如开启／关闭状态，用户可以通过单击切换按钮的滑块来切换状态。
切换按钮的默认配置定义在$.fn.switchbutton.defaults中。
1. 创建切换按钮
通过标记创建切换按钮的方法如下：
<input class="easyui-switchbutton" >
通过JavaScript创建切换按钮的方法如下：
01 <input id="sb" >
02 <script type="text/javascript">
03 $(function(){
04 $('#sb').switchbutton({
05 checked: true,
06 })
07 })
08 </script>
2. 切换按钮属性
切换按钮常用属性说明见表2.34。
表2.34 切换按钮常用属性说明
3. 切换按钮事件
切换按钮常用事件说明见表2.35。
表2.35 切换按钮常用事件说明
4. 切换按钮方法
切换按钮常用方法说明见表2.36。
表2.36 切换按钮常用方法说明
