EasyUI
SwitchButton
Override defaults with $.fn.switchbutton.defaults.
The switch button can be used in a <form>. It has two states: 'on' and 'off'. The user can click or tap to toggle the switch. Labels of the states are customizable.
Usage
Create switchbutton from markup.
Create switchbutton using javascript.
Properties
Name | Type | Description | Default |
---|---|---|---|
width | number | The width of switchbutton. | 60 |
height | number | The height of switchbutton. | 26 |
handleWidth | number | The width of the center handle of switchbutton. | auto |
checked | boolean | Defines if the button is checked. | false |
disabled | boolean | Defines if to disable the button. | false |
readonly | boolean | Defines if the button is read-only. | false |
reversed | boolean | Set to true the onText value and offText value will switch their positions. | false |
onText | string | The text value of the left side. | ON |
offText | string | The text value of the right side. | OFF |
handleText | string | The text value of the center handle. | '' |
value | string | The default value bound to the button. | on |
Events
Name | Parameters | Description |
---|---|---|
onChange | checked | Fires when the checked value is changed. |
Methods
Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
resize | param | Resize the switchbutton. |
disable | none |
Disable the switchbutton. Code example:
$('#sb').switchbutton('disable'); |
enable | none |
Enable the switchbutton. Code example:
$('#sb').switchbutton('enable'); |
readonly | mode | Enable/Disable readonly mode. |
check | none | Check the switchbutton. |
uncheck | none | Uncheck the switchbutton. |
clear | none | Clear the switchbutton's 'checked' value. |
reset | none | Reset the switchbutton's 'checked' value. |
setValue | value | Set the switchbutton value. |