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