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 相关文章推荐
JavaScript中5种调用函数的方法
Mar 12 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
vue打包时去掉所有的console.log
Apr 10 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
php框架知识点的整理和补充
2021/03/01 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python requests.post带head和body的实例
2019/01/02 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
css3的transition属性详解
2014/12/15 HTML / CSS
环境工程大学生自荐信
2013/10/21 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
春晚观后感
2015/06/11 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技