jEasyUI 创建分割按钮学习笔记
简介
jEasyUI 是一个基于 jQuery 的开源 UI 框架，它提供了丰富的界面组件和实用的功能，让开发人员可以轻松地创建各种各样的 Web 应用程序。其中，分割按钮（splitbutton）是一种非常实用的界面组件，它可以同时支持按钮和下拉菜单两种操作，用户可以通过点击按钮或者菜单项来触发不同的操作。
本文将介绍如何使用 jEasyUI 创建分割按钮，并且提供一个实例演示。
创建分割按钮
使用 jEasyUI 创建分割按钮非常简单，只需要按照以下步骤进行即可：
1. 引入 jEasyUI 的 CSS 和 JavaScript 文件
在 HTML 页面中引入 jEasyUI 的 CSS 和 JavaScript 文件，这里以 CDN 的方式为例：
htmlCopy Code<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.9.14/themes/default/easyui.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.9.14/themes/icon.css">
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easyui/1.9.14/jquery.easyui.min.js"></script>
2. 创建 HTML 元素
在 HTML 页面中创建一个 <a> 或 <button> 元素作为分割按钮的显示区域，代码如下：
htmlCopy Code<a href="#" id="splitbutton" class="easyui-splitbutton">分割按钮</a>
3. 调用 jEasyUI 的 splitbutton 方法
在 JavaScript 中调用 jEasyUI 的 splitbutton 方法来创建分割按钮，代码如下：
javascriptCopy Code$('#splitbutton').splitbutton({
plain: false,
menu: '#mm',
onClick: function () {
alert('按钮被点击了！');
}
});
上述代码中，plain 表示是否显示按钮的背景色，menu 表示下拉菜单的 DOM 元素 ID，onClick 是按钮被点击时的回调函数。
4. 创建下拉菜单
在 HTML 页面中创建下拉菜单的 DOM 元素，并将其隐藏起来，代码如下：
htmlCopy Code<div id="mm" style="display:none;">
<div data-options="iconCls:'icon-add'">添加</div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div class="menu-sep"></div>
<div>退出</div>
</div>
上述代码中，data-options 表示菜单项的属性，iconCls 表示菜单项的图标，menu-sep 表示菜单项之间的分割线。
实例演示
接下来我们来看一个完整的实例演示，点击按钮可以弹出下拉菜单，并且可以通过点击菜单项来触发不同的操作。
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jEasyUI 创建分割按钮学习笔记</title>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.9.14/themes/default/easyui.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.9.14/themes/icon.css">
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easyui/1.9.14/jquery.easyui.min.js"></script>
<script>
$(function () {
$('#splitbutton').splitbutton({
plain: false,
menu: '#mm',
onClick: function () {
alert('按钮被点击了！');
}
});
});
</script>
</head>
<body>
<a href="#" id="splitbutton" class="easyui-splitbutton">分割按钮</a>
<div id="mm" style="display:none;">
<div data-options="iconCls:'icon-add'">添加</div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div class="menu-sep"></div>
<div>退出</div>
</div>
</body>
</html>
运行上面的代码，即可看到一个漂亮的分割按钮，点击按钮可以弹出下拉菜单，并且可以通过点击菜单项来触发不同的操作。