jEasyUI 创建分割按钮_分隔按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/csbysj2020/article/details/143670873

jEasyUI 创建分割按钮

jEasyUI 是一个基于 jQuery 的框架，用于帮助开发者快速构建具有丰富交互功能的网页。在 jEasyUI 中，分割按钮（Split Button）是一种特殊的按钮，它可以分为两部分：主要按钮和下拉菜单。用户点击主要按钮会触发一个事件，而点击下拉菜单则可以显示更多的选项。本文将介绍如何在 jEasyUI 中创建和使用分割按钮。

1. 引入 jEasyUI 库

首先，您需要在 HTML 文件中引入 jEasyUI 的相关库。这包括 jQuery 库、jEasyUI 的核心库以及按钮和菜单组件的 CSS 和 JavaScript 文件。

<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<script type="text/javascript" src="jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>

确保这些文件路径正确无误。

2. 创建分割按钮

在 HTML 中，您可以使用 <div> 标签来创建一个分割按钮。使用 data-options 属性来配置按钮的属性和行为。

<div class="easyui-splitbutton" data-options="menu:'#mm', iconCls:'icon-ok'">主要按钮</div>

这里，menu:'#mm' 指定了下拉菜单的 ID，iconCls:'icon-ok' 设置了按钮的图标。

3. 定义下拉菜单

接下来，您需要定义下拉菜单。使用 <div> 标签创建一个菜单容器，并为其添加 easyui-menu 类。

<div id="mm" style="width:150px;">
    <div data-options="iconCls:'icon-undo'">撤销</div>
    <div data-options="iconCls:'icon-redo'">重做</div>
    <div class="menu-sep"></div>
    <div>剪切</div>
    <div>复制</div>
    <div>粘贴</div>
</div>

每个 <div> 标签代表一个菜单项。您可以使用 iconCls 属性为菜单项添加图标。

4. 初始化分割按钮

在页面加载完成后，您需要初始化分割按钮。这可以通过调用 splitbutton 方法来实现。

$(document).ready(function(){
    $('#splitButton').splitbutton();
});

这里，'#splitButton' 是分割按钮的 ID。

5. 事件处理

您可以为分割按钮的主要按钮和下拉菜单项添加事件处理函数。例如，您可以这样为主按钮添加点击事件：

$('#splitButton').bind('click', function(){
    alert('主要按钮被点击');
});

为下拉菜单项添加事件处理函数：

$('#mm').menu({
    onClick:function(item){
        alert(item.text);
    }
});

这里，item.text 是被点击菜单项的文本。

6. 完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 创建分割按钮</title>
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
    <script type="text/javascript" src="jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div class="easyui-splitbutton" data-options="menu:'#mm', iconCls:'icon-ok'">主要按钮</div>
    
    <div id="mm" style="width:150px;">
        <div data-options="iconCls:'icon-undo'">撤销</div>
        <div data-options="iconCls:'icon-redo'">重做</div>
        <div class="menu-sep"></div>
        <div>剪切</div>
        <div>复制</div>
        <div>粘贴</div>
    </div>
    
    <script>
        $(document).ready(function(){
            $('#splitButton').splitbutton();
            $('#splitButton').bind('click', function(){
                alert('主要按钮被点击');
            });
            $('#mm').menu({
                onClick:function(item){
                    alert(item.text);
                }
            });
        });
    </script>
</body>
</html>

通过以上步骤，您就可以在 jEasyUI 中创建并使用分割按钮了。