要创建分割按钮(Split Button)使用 jQuery EasyUI,你可以使用 splitbutton 组件。以下是一个简单的例子:

1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
        <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    </body>
    </html>

2. 创建分割按钮: 使用 splitbutton 函数创建分割按钮。
    <a href="javascript:void(0)" class="easyui-splitbutton" data-options="menu:'#mm',iconCls:'icon-save'">Save</a>

    在上述代码中,menu 用于指定与按钮关联的菜单,iconCls 用于设置按钮图标。

3. 创建菜单: 使用 menu 函数创建菜单。
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div data-options="iconCls:'icon-add'" onclick="addData()">Add</div>
        <div data-options="iconCls:'icon-remove'" onclick="removeData()">Remove</div>
    </div>

4. 初始化分割按钮和菜单: 使用 splitbutton 和 menu 函数初始化分割按钮和菜单。
    <script>
        $(function(){
            $('.easyui-splitbutton').splitbutton();
            $('#mm').menu();
        });

        function addData(){
            alert('Add data clicked!');
            // 在这里添加具体的添加数据操作逻辑
        }

        function removeData(){
            alert('Remove data clicked!');
            // 在这里添加具体的删除数据操作逻辑
        }
    </script>

在上述代码中,splitbutton 函数用于初始化分割按钮,menu 函数用于初始化菜单。点击分割按钮时,与之关联的菜单会弹出。

这是一个简单的例子,你可以根据实际需求和业务逻辑进行更复杂的定制。根据需要,你还可以使用不同的 EasyUI 主题、调整按钮样式、设置其他属性等。


转载请注明出处:http://www.pingtaimeng.com/article/detail/13095/jQuery EasyUI