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
- menubutton
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). |