Jquery Easyui分割按钮组件SplitButton使用详解(17)


Posted in Javascript onDecember 18, 2016

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

Jquery Easyui分割按钮组件SplitButton使用详解(17)

菜单方法

Jquery Easyui分割按钮组件SplitButton使用详解(17)

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 #Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 #Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 #Javascript
前端js弹出框组件使用方法
Aug 24 #Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 #Javascript
教你一步步用jQyery实现轮播器
Dec 18 #Javascript
Angular.js实现注册系统的实例详解
Dec 18 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php 更新数据库中断的解决方法
2009/06/05 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
jQuery操作cookie
2016/08/08 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
实例讲解python函数式编程
2014/06/09 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
党员反对四风问题思想汇报
2014/09/12 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android