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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
node网页分段渲染详解
Sep 05 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
使用python绘制二维图形示例
2019/11/22 Python
Python timeit模块的使用实践
2020/01/13 Python
python实现井字棋小游戏
2020/03/04 Python
Python实现SMTP邮件发送
2020/06/16 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
升学宴演讲稿
2014/09/01 职场文书
八年级英语教学反思
2016/02/15 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript