EasyUI-基本分割按钮

最新推荐文章于 2023-04-21 08:44:27 发布
最新推荐文章于 2023-04-21 08:44:27 发布
阅读量198 收藏
点赞数
分类专栏： Jquery EasyUI


@{
    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>Basic SplitButton</h2>
    <p>Move mouse over the arrow area of button to drop down menu.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
        <a 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>

dxm809
关注
专栏目录
jquery-easyui-1.4.2 Demo
12-05
**jQuery EasyUI 1.4.2 Demo** 是一个基于jQuery库的前端框架EasyUI的演示集合，它展示了EasyUI的各种组件和功能的实际应用。EasyUI是一个轻量级且易于使用的JavaScript框架，它通过简单的HTML标记和CSS样式，帮助...
jquery-easyui-1.3.2+中文文档
08-19
6. **按钮（Button）**: 包括普通按钮、链接按钮、图标按钮等，可方便地添加各种操作。 7. **对话框（Dialog）**: 用于展示内容或进行交互，支持拖动、大小调整和关闭功能。 8. **树形控件（Tree）**: 显示层级...
使用easyUI创建Split Button
java开发指南博客 【转载】
08-08 100
@author YHC SplitButton 包含一个 linkbutton和一个menu.当用户点击或者鼠标悬停在向下箭头区域一个对应的菜单将显示,这个示例演示了如何创建和使用splitbutton 查看 Demo 我们创建一个 splitbutton和一个linkbutton: &lt;div style="border:1px solid #ccc;backgroun...
jQuery EasyUI 菜单与按钮 - 创建分割按钮（Split Button）
最新发布
unber的博客
04-21 299
分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。现在已经定义好了一个分割按钮（Split Button），您不需要写任何的 javascript 代码。
easyUI splitbutton
YHC
08-01 2212
@author YHC 继承至 $.fn.linkbutton.defaults,覆盖默认值$.fn.splitbutton.defaults 和menubutton和相似,splitbutton关联了linkbutton和menu,menubutton和splitbutton之间的不同就是splitbutton分为两个部分,当鼠标移动到splitbutton上 一个分割线将显示,这个菜单仅
【EasyUI篇】SplitButton分割按钮组件
ouYang的博客
09-16 1301
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 16.SplitButton分割按钮组件 与MenuButton相似，只是悬浮右边的下三角才能触发，方法和属性一直，此处就不列出 效果图 ------------------------------------------------ 关注小编微信公众号获取更...
easyui版面拆分
gyzsky的专栏
01-26 2192
easyui拆分版面简单例子
easyui-1.3.2
08-15
2. **面板（Panel）**：提供标题、内容区、工具栏和状态栏的基本布局，是页面内容的基础容器。 3. **菜单（Menu）**：创建下拉式或弹出式菜单，用于组织和导航功能。 4. **表单（Form）**：支持各种表单元素，如...
jquery-easyui-1.3.3
06-26
1. **jQuery 基础**：EasyUI 是建立在 jQuery 之上的，因此理解 jQuery 的基本用法至关重要。jQuery 提供了简洁的API来操作DOM（文档对象模型），处理事件，进行动画效果以及执行Ajax请求。在使用 EasyUI 之前，应...
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
10-23
在EasyUI中，按钮的创建有多种形式，可以是链接按钮（LinkButton）、菜单按钮（Menu Button）、分割按钮（Split Button）等。这些按钮都可以通过添加相应的class到`<a>`或`<button>`标签来实现。 ##### 链接按钮...
easyui----splitbutton--和menubutton非常类似
有 prepare , No out
12-07 1795
1 Ok Help 2 区别在于 点到了 下三角才出弹出框，而 menubutton是直接出弹出框
第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件
weixin_30426065的博客
04-02 117
jQuery EasyUI，SplitButton(分割按钮)组件 学习要点： 　　1.加载方式 　　2.属性列表 　　3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用方法，这个组件依赖 于 Menu(菜单)组件和 LinkButton(按钮)组件。 注意：SplitButton(分割按钮)组件与，MenuButt...
EasyUI随笔-splitbutton、menubutton伪动态添加
初四·都梁侯
11-04 2235
之所以说是“伪”动态，q
12EasyUI 菜单与按钮- 创建分割按钮（Split Button）
阿甘兄
04-17 704
分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。 我们创建一个分割按钮（Split Button）和一个链接按钮（Link Button）： <div style="border:1px solid #ccc;b...
easyui学习记录4-分割按钮
xwc999
11-09 112
效果图 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
jQuery EasyUI — 按钮间的自定义竖线（分隔线）样式
追求极简生活方式
11-13 7330
1.css样式定义 2.
2.菜单和按钮-easyUi
wangwei249的博客
06-03 622
一。菜单-menu 1. 使用HTML标签创建菜单必须对标签引用'easyui-menu'类，每个菜单项都将使用标签创建。     为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。  New Open
EasyUI toolbar分隔线
坐看云起云落。
10-08 6109
问题描述：EasyUI toolbar中添加分隔线时，分隔线会自动跑到最左边。解决方案一： 使用一个table来创建toolbar，<div id="toolbar"> <table> <tr> <td> <a href="#" class="easyui-linkbutton" data-options="iconC
jQuery EasyUI 中文完全指南
"这份文档详细介绍了jQuery EasyUI的使用方法和功能，涵盖了基础组件、布局、菜单和按钮等多个方面，是学习和开发过程中不可或缺的参考资料。" jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值