Easy Tutorial
❮ Jeasyui Layout Accordion Ext Datagridview ❯

jQuery EasyUI Menu and Button Plugin - Splitbutton Split Button



Extends from $.fn.linkbutton.defaults. Overrides the default defaults with $.fn.splitbutton.defaults.

Similar to the menu button (menubutton), the split button (splitbutton) is also related to the link button (linkbutton) and menu (menu). Unlike the menu button (menubutton), the split button (splitbutton) is divided into two parts. When the mouse moves over the split button (splitbutton), a dividing line will be displayed. The menu (menu) is only shown when the mouse is over the right part of the split button.

Dependencies

Usage

Create a split button (splitbutton) from markup.

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
    data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
    <div data-options="iconCls:'icon-ok'">Ok</div>
    <div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>

Create a split button (splitbutton) using javascript.

<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
...
</div>
$('#sb').splitbutton({
    iconCls: 'icon-ok',
    menu: '#mm'
});

Properties

This property extends from the link button (linkbutton), and the following are the additional properties for the split button (splitbutton).

Name Type Description Default Value
plain boolean If set to true, a simple effect is displayed. true
menu string The selector used to create the corresponding menu (menu). null
duration number The duration in milliseconds to display the menu (menu) when hovering over the button. 100

Methods

This method inherits from the link button (linkbutton), and the following are the additional or overridden methods for the split button (splitbutton).

Name Parameters Description
options none Returns the options object.
disable none Disables the split button (splitbutton). Example code: $('#sb').splitbutton('disable');
enable none Enables the split button (splitbutton). Example code: $('#sb').splitbutton('enable');
destroy none Destroys the split button (splitbutton).
❮ Jeasyui Layout Accordion Ext Datagridview ❯