Bootstrap switch function

Source: Internet
Author: User

Bootstrap switch is a button switch that gets its status when clicked by the following code:

1 <  ID= "email_switch_state"  type= "checkbox">

1$ (' #email_switch_state '). On ({2' Switchchange.bootstrapswitch ':function(event, state) {3             if(state = =true)4             {5$ (' #text '). html (' OK '));6             }7             Else8             {9$ (' #text '). html (' NO '));Ten             } One         } A});

Additional Methods
Name Description
Togglestate Toggle the Switch state
Toggleanimate Toggle the animate option
Toggledisabled Toggle the disabled state
Togglereadonly Toggle the ReadOnly state
Toggleindeterminate Toggle the indeterminate state
Toggleinverse Toggle the inverse option
Destroy Destroy the instance of Bootstrap Switch
Options
Name Attribute Type Description Values Default
State Checked Boolean The checkbox state True, False True
Size Data-size String The checkbox size NULL, ' mini ', ' small ', ' normal ', ' large ' Null
Animate Data-animate Boolean Animate the Switch True, False True
Disabled Disabled Boolean Disable State True, False False
ReadOnly ReadOnly Boolean Readonly State True, False False
Indeterminate Data-indeterminate Boolean Indeterminate state True, False False
Inverse Data-inverse Boolean Inverse switch direction True, False False
Radioalloff Data-radio-all-off Boolean Allow this radio button to being unchecked by the user True, False False
OnColor Data-on-color String Color of the left side of the switch ' Primary ', ' info ', ' success ', ' warning ', ' danger ', ' Default ' ' Primary '
Offcolor Data-off-color String Color of the right side of the switch ' Primary ', ' info ', ' success ', ' warning ', ' danger ', ' Default ' ' Default '
Ontext Data-on-text String Text of the left side of the switch String ' On '
Offtext Data-off-text String Text of the right side of the switch String ' OFF '
LabelText Data-label-text String Text of the center handle of the switch String ' &nbsp; '
Handlewidth Data-handle-width String | Number Width of the left and right sides in pixels ' Auto ' or number ' Auto '
Labelwidth Data-label-width String | Number Width of the center handle in pixels ' Auto ' or number ' Auto '
BaseClass Data-base-class String Global class Prefix String ' Bootstrap-switch '
Wrapperclass Data-wrapper-class String | Array Container element Class (es) String | Array ' Wrapper '
OnInit Function Callback function to execute on initialization Function
function(event, state) {}
Onswitchchange Function Callback function to execute in switch state change Function
function(event, state) {}

$.fn.bootstrapswitch.defaults.size = ' large ';
$.fn.bootstrapswitch.defaults.oncolor = ' success ';
$ (' #toggle-state-switch '). Bootstrapswitch (' state ');

Bootstrap switch function

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.