jQuery EasyUI 菜单与按钮 - 创建分割按钮（Split Button）
jQuery EasyUI 菜单与按钮 - 创建分割按钮（Split Button）
分割按钮（Split Button）是一种常用的功能按钮，在一般情况下，点击按钮本身会触发某一操作，而当用户需要实现更多高级操作时，可以点击按钮旁边的下拉箭头，弹出一系列菜单项，提供更多选项让用户选择。在 jQuery EasyUI 中，我们可以很方便地创建一个分割按钮，下面我们来看看如何完成这个过程。
1. 引入必要的文件
要使用 EasyUI 创建分割按钮，我们需要先在 HTML 代码中引入必要的文件。这里包括 jQuery 库、EasyUI 样式表、EasyUI 菜单和按钮的 JS 文件以及 EasyUI 默认主题文件：
<head>
<meta charset="utf-8">
<title>Split Button Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.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>
</head>
2. 创建基本结构
接下来我们需要定义一个 HTML 元素作为分割按钮的容器，该元素可以是一个普通的 div 标签。我们可以给这个容器自定义一个 ID 值，以便后面的 JS 代码能够方便地找到该元素。
<div id="splitBtn">Split Button</div>
3. 定义菜单项
分割按钮所搭配的下拉菜单中需要包含多个菜单项。我们可以使用菜单控件 menu 创建这些菜单项。下面是一个简单的示例：
<div id="splitBtn">Split Button</div>
<div id="mm">
<div data-options="iconCls:'icon-save'">Save</div>
<div data-options="iconCls:'icon-cut'">Cut</div>
<div data-options="iconCls:'icon-paste'">Paste</div>
<div class="menu-sep"></div>
<div>
<span>SubMenu</span>
<div>
<div>Item1</div>
<div>Item2</div>
<div class="menu-sep"></div>
<div>
<span>SubSubMenu</span>
<div>
<div>Item3</div>
<div>Item4</div>
</div>
</div>
<div>Item5</div>
</div>
</div>
<div>Exit</div>
</div>
这里我们定义了一个 div 元素，其中包含了多个菜单项。每个菜单项都使用 data-options 属性来设置图标和文本。其中，menu-sep 类可以在菜单中添加分割线。
4. 初始化分割按钮
接下来，我们需要在 JS 代码中定义分割按钮。我们可以使用 menubutton 组件来创建一个分割按钮。以下是一个简单的代码示例：
$('#splitBtn').menubutton({
menu: '#mm',
iconCls: 'icon-edit'
});
在上面的代码中，我们首先获取了 ID 为 splitBtn 的元素，并将其转化为分割按钮通过 menubutton 组件。我们设置了分割按钮所需要的下拉菜单名称 menu，以及分割按钮的图标 iconCls。
5. 完整代码
最终，我们可以将上述的所有代码整合到一起，得到如下的实现方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Split Button Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.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>
</head>
<body>
<div id="splitBtn">Split Button</div>
<div id="mm">
<div data-options="iconCls:'icon-save'">Save</div>
<div data-options="iconCls:'icon-cut'">Cut</div>
<div data-options="iconCls:'icon-paste'">Paste</div>
<div class="menu-sep"></div>
<div>
<span>SubMenu</span>
<div>
<div>Item1</div>
<div>Item2</div>
<div class="menu-sep"></div>
<div>
<span>SubSubMenu</span>
<div>
<div>Item3</div>
<div>Item4</div>
</div>
</div>
<div>Item5</div>
</div>
</div>
<div>Exit</div>
</div>
<script>
$('#splitBtn').menubutton({
menu: '#mm',
iconCls: 'icon-edit'
});
</script>
</body>
</html>
以上代码可以通过浏览器打开文件查看分割按钮的效果。