EasyUI-分割按钮操作

最新推荐文章于 2024-04-08 08:50:19 发布
最新推荐文章于 2024-04-08 08:50:19 发布
阅读量207 收藏
点赞数
分类专栏： Jquery EasyUI
该博客展示了基于jQuery EasyUI的网页开发示例。页面包含SplitButton等多种按钮，可进行禁用、启用等操作，还配备相应菜单，如编辑菜单有撤销、复制等功能，帮助菜单包含帮助、更新等内容，体现了EasyUI在构建交互性网页方面的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <h2>SplitButton Actions</h2>
    <p>Click the buttons below to perform actions.</p>
    <div style="margin:20px 0;">
        <a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').splitbutton('disable')">Disable Edit</a>
        <a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').splitbutton('enable')">Enable Edit</a>
    </div>
    <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
        <a id="btn-edit" href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
    </div>
    <div id="mm1" style="width:150px;">
        <div data-options="iconCls:'icon-undo'">Undo</div>
        <div data-options="iconCls:'icon-redo'">Redo</div>
        <div class="menu-sep"></div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div>
            <span>Toolbar</span>
            <div>
                <div>Address</div>
                <div>Link</div>
                <div>Navigation Toolbar</div>
                <div>Bookmark Toolbar</div>
                <div class="menu-sep"></div>
                <div>New Toolbar...</div>
            </div>
        </div>
        <div data-options="iconCls:'icon-remove'">Delete</div>
        <div>Select All</div>
    </div>
    <div id="mm2" style="width:100px;">
        <div data-options="iconCls:'icon-ok'">Ok</div>
        <div data-options="iconCls:'icon-cancel'">Cancel</div>
    </div>
    <div id="mm3" style="width:150px;">
        <div>Help</div>
        <div>Update</div>
        <div>
            <span>About</span>
            <div class="menu-content" style="padding:10px;text-align:left">
                <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
                <p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
            </div>
        </div>
    </div>


</body>
</html>

EasyUI-基本分割按钮
dxm809的博客
03-22 232
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
使用easyUI创建Split Button
java开发指南博客 【转载】
08-08 130
@author YHC SplitButton 包含一个 linkbutton和一个menu.当用户点击或者鼠标悬停在向下箭头区域一个对应的菜单将显示,这个示例演示了如何创建和使用splitbutton 查看 Demo 我们创建一个 splitbutton和一个linkbutton: &lt;div style="border:1px solid #ccc;backgroun...
jQuery EasyUI 菜单与按钮 - 创建分割按钮（Split Button）
unber的博客
04-21 353
分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。现在已经定义好了一个分割按钮（Split Button），您不需要写任何的 javascript 代码。
easyUI splitbutton
YHC
08-01 2283
@author YHC 继承至 $.fn.linkbutton.defaults,覆盖默认值$.fn.splitbutton.defaults 和menubutton和相似,splitbutton关联了linkbutton和menu,menubutton和splitbutton之间的不同就是splitbutton分为两个部分,当鼠标移动到splitbutton上 一个分割线将显示,这个菜单仅
【EasyUI篇】SplitButton分割按钮组件
ouYang的博客
09-16 1364
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 16.SplitButton分割按钮组件 与MenuButton相似，只是悬浮右边的下三角才能触发，方法和属性一直，此处就不列出 效果图 ------------------------------------------------ 关注小编微信公众号获取更...
jquery-easyui-1.4.2 Demo
12-05
**jQuery EasyUI** 的核心是jQuery，一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互。EasyUI在jQuery的基础上提供了一整套UI组件，如对话框（dialog）、表格（datagrid）、表单（form）、菜单...
jquery-easyui-1.3.2+中文文档
08-19
6. **按钮（Button）**: 包括普通按钮、链接按钮、图标按钮等，可方便地添加各种操作。 7. **对话框（Dialog）**: 用于展示内容或进行交互，支持拖动、大小调整和关闭功能。 8. **树形控件（Tree）**: 显示层级...
easyui-1.3.2
08-15
9. **工具栏（Toolbar）**：用于放置操作按钮的横向条，常与面板结合使用。 10. **对话框（Dialog）**：提供弹出式的对话框，支持确认、警告等不同类型的对话框。 11. **滑块（Slider）**：提供数值选择的滑动条。...
jquery-easyui-1.3.3
06-26
EasyUI 提供了各种表单元素，如文本框（Textbox）、复选框（Checkbox）、单选按钮（RadioButton）等，并支持验证用户输入。 7. **数据绑定和远程数据源**：EasyUI 可以与后端服务无缝集成，通过Ajax请求获取和提交...
jquery-easyui-1.8.4.zip
08-22
jQuery EasyUI 的移动版（mobile）针对触屏设备进行了优化，提供了一套符合移动设备交互习惯的组件，如滑动菜单、触摸友好型按钮等。这使得开发者能够构建跨平台的应用，适应PC和移动设备。 关键文件解析： - **...
EasyUI中文版手册
01-10
本资源是EasyUI1.4版本中文手册，详细介绍了基础、布局、菜单和按钮、表单、窗口、表格和树，以及扩展部分。
Jqurey实现类似EasyUI的页面布局可改变左右的宽度
09-04
主要介绍了通过Jqurey实现类似EasyUI的页面布局可改变左右的宽度,需要的朋友可以参考下
easyui版面拆分
gyzsky的专栏
01-26 2238
easyui拆分版面简单例子
easyui----splitbutton--和menubutton非常类似
有 prepare , No out
12-07 1857
1 Ok Help 2 区别在于 点到了 下三角才出弹出框，而 menubutton是直接出弹出框
第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件
weixin_30426065的博客
04-02 153
jQuery EasyUI，SplitButton(分割按钮)组件 学习要点： 　　1.加载方式 　　2.属性列表 　　3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用方法，这个组件依赖 于 Menu(菜单)组件和 LinkButton(按钮)组件。 注意：SplitButton(分割按钮)组件与，MenuButt...
EasyUI随笔-splitbutton、menubutton伪动态添加
初四·都梁侯
11-04 2293
之所以说是“伪”动态，q
12EasyUI 菜单与按钮- 创建分割按钮（Split Button）
阿甘兄
04-17 761
分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。 我们创建一个分割按钮（Split Button）和一个链接按钮（Link Button）： <div style="border:1px solid #ccc;b...
easyui学习记录4-分割按钮
xwc999
11-09 142
效果图 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
EasyUI Jquery 学习笔记 —— Menu（菜单）与 Button（按钮）详细版
最新发布
cccloveforever的博客
04-08 1531
与菜单按钮（menubutton）相似，分割按钮（splitbutton）也与链接按钮（linkbutton）及菜单（menu）有关。与菜单按钮（menubutton）不同的是，分割按钮（splitbutton）被分割为两部分。当移动鼠标到分割按钮（splitbutton）上时，将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单（menu）。
Jquery-Easyui-1.2.3版本发布及文档说明
- **Dialog**：对话框组件，用于显示模态或非模态窗口，支持自定义内容和按钮操作。 - **MessageBox**：消息提示框，用于显示确认框、错误框、提示框等。 - **Tooltip**：提示工具，用于显示鼠标悬浮提示信息。 - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值