前言
扩展自$.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="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="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="100px;"> <div data-options="iconCls:'icon-ok'">Ok</div> <div data-options="iconCls:'icon-cancel'">Cancel</div> </div> <div id="mm3" style="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="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>
插件效果
