Jquery Easyui分割按钮组件SplitButton使用详解（17）

2024-04-09 21:02:32

SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件

加载方式

Class加载

 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton"
  data-options="menu:'#box',iconCls:'icon-edit'">编辑</a>
 <div id="box" 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 class="menu-sep"></div>
  <div data-options="iconCls:'icon-remove'">删除</div>
  <div>全选</div>
 </div>

Js调用加载

 <a href="javascript:void(0)" id="edit" >编辑</a>
 <div id="box" 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 class="menu-sep"></div>
  <div data-options="iconCls:'icon-remove'">删除</div>
  <div>全选</div>
 </div>
 <script>
  $(function () {
   $('#edit').splitbutton({
    // 是否显示简易效果
    plain : false,
    // 用来创建一个对应菜单的选择器。
    menu : '#box',
    // 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。
    duration : 100,
   })
  });
 </script>

属性列表

其他属性，参考依赖组件 LinkButton

菜单方法

//返回属性对象
console.log($('#edit').splitbutton('options'));

//禁用菜单按钮
$('#edit').splitbutton('disable');

//启用菜单按钮
$('#edit').splitbutton('enable');

//销毁菜单按钮
$('#edit').splitbutton('destroy');

//扩展自$.fn.linkbutton.defaults。使用$.fn.splitbutton.defaults 重写默认值对象。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery EasyUI API 中文文档 - Menu菜单

用 $.fn.menu.defaults 重写了 defaults. 复制代码代码如下: <div id="mm" class="easyui-menu" style="width:120px;"> <div>New</div> <div> <span>Open</span> <div style="width:150px;"> <di
Bootstrap按钮下拉菜单组件详解

按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件. <div class="btn-toolbar" role="toolbar"> <div class="btn-group">
Jquery Easyui日历组件Calender使用详解（23）

本文实例为大家分享了Jquery Easyui日历组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div> JS调用加载 <div id="box"></div> <script> $(function
Jquery Easyui菜单组件Menu使用详解（15）

本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下加载方式菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件.然后,再通过 JS 事件部分再响应. <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打开</span> <!--二次菜单--&
Jquery Easyui验证组件ValidateBox使用详解（20）

本文实例为大家分享了Jquery Easyui验证组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /> JS调用加载 <input id="email" /> <script> $(func
Jquery Easyui搜索框组件SearchBox使用详解（19）

本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b
vue多级多选菜单组件开发

本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选:反之,没达到全选时,父标题栏的勾选图标自动取消勾选当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选:反之,没达到全选时,最底下那个全选框自动取消勾选点击最底下那个全选框可以全选或取消全部的勾选图标所以总结起来我们重点要利
Jquery Easyui自定义下拉框组件使用详解（21）

本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下加载方式 JS调用加载自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>
iOS中长按调出菜单组件UIMenuController的使用实例

UIMenuController的使用 UIMenuController的展现需要基于一个View视图,其交互则需要基于其所在View视图的Responder.举例来说,如果一个UIMenuController展现在当前ViewController的View上,则此UIMenuController的交互逻辑交由当前的ViewController进行管理. 在界面展示出UIMenuController需要3个条件: 1.当前的Responder处于第一响应. 2.UIMenuController对
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍

扩展自 $.fn.linkbutton.defaults.用 $.fn.menubutton.defaults 重写了defaults. 依赖 menu linkbutton 用法复制代码代码如下: <a href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit</a> <div id="mm" style="width:1

Jquery Easyui分割按钮组件SplitButton使用详解（17）

相关推荐

随机推荐