前言

扩展自$.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\">&nbsp;</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(分割按钮)的更多相关文章

  1. easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)

    前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...

  2. easyui源码翻译1.32--MenuButton(菜单按钮)

    前言 扩展自$.fn.linkbutton.defaults.使用$.fn.menubutton.defaults重写默认值对象..下载该插件翻译源码 菜单按钮是下拉菜单的一部分.它伴随着linkbu ...

  3. easyui源码翻译1.32--datagrid(数据表格)

    前言 此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34  1.33开始支持css3 算是又一个转折  但是 ...

  4. easyui源码翻译1.32--EasyLoader(简单加载)

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  5. easyui源码翻译1.32--panel(面板)

    前言 昨天发布了表格datagrid的翻译源码 ,easyui的许多插件有依赖关系  比如datagrid 的渲染需要panel.resizable.linkbutton.pagination   今 ...

  6. easyui源码翻译1.32--Menu(菜单)

    前言 使用$.fn.menu.defaults重写默认值对象.下载该插件翻译源码 菜单组件通常用于快捷菜单.他是构建其他菜单组件的必备基础组件.比如:menubutton和splitbutton.它还 ...

  7. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  8. easyui源码翻译1.32--NumberBox(数值输入框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.numberbox.defaults重写默认值对象.下载该插件翻译源码 数值输入框是用来限制用户只能输入数值型数据的.他可 ...

  9. easyui源码翻译1.32--DateTimeBox(日期时间输入框)

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 和日期输入框类似,日期时间输入框允许用户选择日期和指定 ...

随机推荐

  1. js中的null与undefined

    null undefined

  2. 第十篇、HTML5实战篇——1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--支持IE ...

  3. GDI+中发生一般性错误(转载)

    在开发.NET应用中,使用 System.Drawing.Image.Save 方法而导致“GDI+ 中发生一般性错误”的发生,通常有以下三种原因:1. 相应的帐户没有写权限.解决方法:赋予 NETW ...

  4. 禁用Linux bash rm --force

    防止无意的Linux bash rm --force 二.禁用rm -rf 因为rm -rf 删除文件的时候,经常会不小心将系统文件或者多个有用的目录删除掉.有两种方法:1,每次删除都用-i(inte ...

  5. C++ 二维数组(双重指针作为函数参数)

    本文的学习内容参考:http://blog.csdn.net/yunyun1886358/article/details/5659851 http://blog.csdn.net/xudongdong ...

  6. Walkthrough: Creating and Using a Dynamic Link Library (C++)

    Original Link: http://msdn.microsoft.com/zh-cn/library/ms235636.aspx Following content is only used ...

  7. [cocos2d-x 2.0.4][iOS7]不能全屏问题

    本篇文章由:http://www.sollyu.com/cocos2d-x-2-0-4-ios7-cannot-be-full-screen-problem/ 说明 ▼ 症状如下图 解决 打开你工程的 ...

  8. sql触发器知识

    触发器中的Inserted和deleted临时表: SQL2000中,inserted表和deleted表用于存放对表中数据行的修改信息.他们是触发器执行时自动创建的,放在内存中,是临时表.当触发器工 ...

  9. PHPCMS 核心代码与 www 分离部署

    为了满足更多用户二次开发的兴趣与爱好,同时,为了更加安全.可以通过修改入口代码的包含方式来让主程序和www程序分开. 先看下面目录结构: (图1) 我们需要将 phpcms 目录和 index.php ...

  10. git fork同步原作者

    从github上获取源代码,一种是直接下载,但是无法改动后提交. 一种是fork一下,但是和原作者同步麻烦. 所以我找到了四个命令,解决同步问题. 以后建议大家fork一下,主要是哪天对源码熟悉了,想 ...