前言
扩展自$.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>
插件效果
