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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 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
php验证session无效的解决方法
2014/11/04 PHP
JS 时间显示效果代码
2009/08/23 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
django使用JWT保存用户登录信息
2020/04/22 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
仰望星空观后感
2015/06/10 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
合作合同协议书
2016/03/21 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
Python实现简繁体转换
2021/06/07 Python