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>
以上代码可以通过浏览器打开文件查看分割按钮的效果。