easyui源码翻译1.32--SplitButton(分割按钮)
前言
扩展自$.fn.linkbutton.defaults。用于$.fn.splitbutton.defaults重写默认值对象。下载该插件翻译源码
类似菜单按钮,分割按钮也与linkbutton和菜单有关系。menubutton和splitbutton之间的区别是,splitbutton分为两部分。它只会在鼠标移动到splitbutton按钮右边的时候才会显示出“分割线”。
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译 qq 1364386878 分割按钮
*/
(function ($) {
//初始化组件
function init(jq) {
var options = $.data(jq, "splitbutton").options;
var splitbutton = $(jq);
splitbutton.removeClass("s-btn-active s-btn-plain-active").addClass("s-btn");
splitbutton.linkbutton($.extend({}, options, {
text: options.text
+ "<span class=\"s-btn-downarrow\"> </span>"
}));
if (options.menu) {
$(options.menu).menu({
onShow: function () {
splitbutton.addClass((options.plain == true) ? "s-btn-plain-active" : "s-btn-active");
}, onHide: function () {
splitbutton.removeClass((options.plain == true) ? "s-btn-plain-active" : "s-btn-active");
}
});
}
_setdisable(jq, options.disabled);
};
//禁用或启用组件
function _setdisable(jq, flag) {
var options = $.data(jq, "splitbutton").options;
options.disabled = flag;
var splitbutton = $(jq);
//下拉箭头
var downarrow = splitbutton.find(".s-btn-downarrow");
if (flag) {
splitbutton.linkbutton("disable");
downarrow.unbind(".splitbutton");
} else {
splitbutton.linkbutton("enable");
downarrow.unbind(".splitbutton");
downarrow.bind("click.splitbutton", function () {
initMenu();
return false;
});
var timeOutId = null;
downarrow.bind("mouseenter.splitbutton", function () {
timeOutId = setTimeout(function () {
initMenu();
}, options.duration);
return false;
}).bind("mouseleave.splitbutton", function () {
if (timeOutId) {
clearTimeout(timeOutId);
}
});
}
// 初始化组件下拉菜单
function initMenu() {
if (!options.menu) {
return;
}
$("body>div.menu-top").menu("hide");
$(options.menu).menu("show", { alignTo: splitbutton });
splitbutton.blur();
};
};
//初始化组件
$.fn.splitbutton = function (target, parm) {
if (typeof target == "string") {
return $.fn.splitbutton.methods[target](this, parm);
}
target = target || {};
return this.each(function () {
var splitbutton = $.data(this, "splitbutton");
if (splitbutton) {
$.extend(splitbutton.options, target);
} else {
$.data(this, "splitbutton", {
options: $.extend({},
$.fn.splitbutton.defaults,
$.fn.splitbutton.parseOptions(this),
target)
});
$(this).removeAttr("disabled");
}
init(this);
});
};
//默认方法
$.fn.splitbutton.methods = {
//返回属性对象
options: function (jq) {
return $.data(jq[0], "splitbutton").options;
},
//返回属性对象
enable: function (jq) {
return jq.each(function () {
_setdisable(this, false);
});
},
//启用分割按钮
disable: function (jq) {
return jq.each(function () {
_setdisable(this, true);
});
},
//销毁分割按钮
destroy: function (jq) {
return jq.each(function () {
var options = $(this).splitbutton("options");
if (options.menu) {
$(options.menu).menu("destroy");
}
$(this).remove();
});
}
};
//解析器
$.fn.splitbutton.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.fn.linkbutton.parseOptions(target),
$.parser.parseOptions(target, ["menu",
{
plain: "boolean",
duration: "number"
}]));
};
//默认属性和事件 继承linkbutton
$.fn.splitbutton.defaults = $.extend({}, $.fn.linkbutton.defaults,
{
plain: true,//设置为true将显示简洁效果
menu: null,//用来创建一个对应菜单的选择器
duration: 100//定义鼠标划过按钮时显示菜单所持续的时间,单位为毫秒
});
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic SplitButton - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.menu.js"></script>
<script src="../../plugins2/jquery.linkbutton.js"></script>
<script src="../../plugins2/jquery.splitbutton.js"></script>
</head>
<body>
<h2>Basic SplitButton</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Move mouse over the arrow area of button to drop down menu.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="padding:5px;border:1px solid #ddd;">
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
</div>
<div id="mm1" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>
<span>Toolbar</span>
<div style="width:150px;">
<div>Address</div>
<div>Link</div>
<div>Navigation Toolbar</div>
<div>Bookmark Toolbar</div>
<div class="menu-sep"></div>
<div>New Toolbar...</div>
</div>
</div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
<div id="mm3" style="width:150px;">
<div>Help</div>
<div>Update</div>
<div>
<span>About</span>
<div class="menu-content" style="padding:10px;text-align:left">
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
<p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modem, interactive, javascript applications.</p>
</div>
</div>
</div> </body>
</html>
插件效果
easyui源码翻译1.32--SplitButton(分割按钮)的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--MenuButton(菜单按钮)
前言 扩展自$.fn.linkbutton.defaults.使用$.fn.menubutton.defaults重写默认值对象..下载该插件翻译源码 菜单按钮是下拉菜单的一部分.它伴随着linkbu ...
- easyui源码翻译1.32--datagrid(数据表格)
前言 此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34 1.33开始支持css3 算是又一个转折 但是 ...
- easyui源码翻译1.32--EasyLoader(简单加载)
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--panel(面板)
前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系 比如datagrid 的渲染需要panel.resizable.linkbutton.pagination 今 ...
- easyui源码翻译1.32--Menu(菜单)
前言 使用$.fn.menu.defaults重写默认值对象.下载该插件翻译源码 菜单组件通常用于快捷菜单.他是构建其他菜单组件的必备基础组件.比如:menubutton和splitbutton.它还 ...
- easyui源码翻译1.32--Combo(自定义下拉框)
前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...
- easyui源码翻译1.32--NumberBox(数值输入框)
前言 扩展自$.fn.validatebox.defaults.使用$.fn.numberbox.defaults重写默认值对象.下载该插件翻译源码 数值输入框是用来限制用户只能输入数值型数据的.他可 ...
- easyui源码翻译1.32--DateTimeBox(日期时间输入框)
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 和日期输入框类似,日期时间输入框允许用户选择日期和指定 ...
随机推荐
- 使用jsonp跨域请求
一.异步对象,不能实现跨域请求 在站点A中访问站点B的数据: 站点A代码: window.onload = function () { document.getElementById("bt ...
- Warning: Attempt to present * on * which is already presenting *
Warning: Attempt to present (要被presented的控制器) on (哪个控制器来presenting) which is already presenting (已经 ...
- 如何从零开始实现一个soa远程调用服务基础组件
说起soa远程调用基础组件,最著名的莫过于淘宝的dubbo了,目前很多的大型互联网公司都有一套自己的远程服务调用分布式框架,或者是使用开源的(例如dubbo),或者是自己基于某种协议(例如hessia ...
- tomcat错误信息解决方案【严重:StandardServer.await: create[8005]
1.独立运行的tomcat.exe没有关闭,关闭tomcat图标并结束掉tomcat进程.(我是这个原因,在开始菜单里找到tomcat,然后stop它) 2.安装了其他的软件占用了8080端口,tom ...
- Cloudcraft: 云架构图形可视化(智能AWS图表)
Cloudcraft: 云架构图形可视化(智能AWS图表) 2016.09.11 官方网站: https://cloudcraft.co/ Cloudcraft是一个Web应用,用图形表示各种AWS服 ...
- RX学习笔记:Bootstrap
Bootstrap https://getbootstrap.com 2016-07-01 在学习FreeCodeCamp课程中了解到Bootstrap,并于课程第一个实战题卡在响应式部分,于是先对B ...
- 重力加速度陀螺仪传感器MPU-6050(一)
MPU-60X0 对陀螺仪和加速度计分别用了三个16 位的ADC,将其测量的模拟量转化 为可输出的数字量.为了精确跟踪快速和慢速的运动,传感器的测量范围都是用户可控的,陀螺仪可测范围为±250,±50 ...
- MVC之重定向
MVC的重定向主要通过RedirectResult和RedirectToRouteResult实现.很显然,这两个对象都是MVC返回对象ActionResult的两个继承,具体原理不赘述. 这两个方法 ...
- 创建一个.bat文件,用于打开某个路径下的文件
- Linux操作命令(一)
ls 命令 ls 命令是 linux 下最常用的命令,ls 命令就是 list 的缩写. ls 用来打印出当前目录的清单.如果 ls 指定其他目录,那么就会显示指定目录里的文件及文件夹清单. 通过 l ...