current position:Home>Super cool jQuery switch button plug-in based on Bootstrap

Super cool jQuery switch button plug-in based on Bootstrap

2021-08-23 00:20:55 mb611f1a641bd18

A brief tutorial

This one is based on bootstrap Cool  jQuery Switch button plug-in . The switch button plug-in can convert check boxes and radio buttons into Android style switch buttons . The plug-in can set the color of the switch button 、 Is it available 、 Display properties such as text , You can also place the switch button in the modal window to display .

Usage method

First, we need to introduce dependent files into the page :  jquery、Bootstrap、Bootstrap Switch CSS and Bootstrap Switch JS.

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
  • 1.
  • 2.
  • 3.
  • 4.

Then add... Where you need to use it checkbox

<input type="checkbox" name="my-checkbox" checked>
  • 1.

Initialize the switch button plug-in through the following code :

        "onColor" : "success",
        "offColor" : "success",
        "onText" : " male ",
        "offText" : " Woman "
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

Configuration parameters (Bootstrap 3)

Parameter name attribute type describe Parameter values The default value is
state checked Boolean checkbox The state of true, false true
size data-size String checkbox Size of null, 'mini', 'small', 'normal', 'large' null
animate data-animate Boolean Whether the switch button is animated true, false true
disabled disabled Boolean Disable state true, false false
readonly readonly Boolean Read only status true, false false
indeterminate data-indeterminate Boolean Uncertain state true, false false
inverse data-inverse Boolean Reverse the direction of the switch button true, false false
radioAllOff data-radio-all-off Boolean Allow users to use this radio Button execution unchecked operation true, false false
onColor data-on-color String The color on the left of the switch button 'primary', 'info', 'success', 'warning', 'danger', 'default' 'primary'
offColor data-off-color String The color on the right of the switch button 'primary', 'info', 'success', 'warning', 'danger', 'default' 'default'
onText data-on-text String Text to the left of the switch button String 'ON'
offText data-off-text String Text to the right of the switch button String 'OFF'
labelText data-label-text String In the middle of the switch button Label Text String ' '
handleWidth data-handle-width String | Number The width of the left and right switch buttons , Unit pixel 'auto' or Number 'auto'
labelWidth data-label-width String | Number Switch button Label The width of the text , Unit pixel 'auto' or Number 'auto'
baseClass data-base-class String overall situation class Prefix String 'bootstrap-switch'
wrapperClass data-wrapper-class String | Array Wrap switch button elements class String | Array 'wrapper'
onInit   Function Callback function after switch button initialization Function
function(event, state) {}
onSwitchChange   Function Callback function when the state of switch button changes Function
function(event, state) {}

Global defaults override

You can override the default parameter configuration in the library by :

$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';
  • 1.
  • 2.

Method (Bootstrap 3)

stay Bootstrap Switch in , Each configuration parameter is a method .

If the second parameter is omitted , Method returns the current value .

You can call the method in the following way :

$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
  • 1.
  • 2.

Additional methods


Method name Methods described
toggleState Change the status of the switch button
toggleAnimate Toggles the state of the animation
toggleDisabled Switch disabled state
toggleReadonly Switch readonly state
toggleIndeterminate Switch indeterminate state
toggleInverse Switch the reverse parameter
destroy The destruction Bootstrap Switch button


Special behavior

  • state The third parameter of the method is an optional parameter skip, If true,switchChange Event will not be executed , The default value is false.
  • toggleState The second parameter of the method is an optional parameter skip, If true,switchChange Event will not be executed , The default value is false.
  • wrapperClass Method can receive a... In the second parameter false value , In this way, it will class Reset defaults .

event (Bootstrap 3)

All events are added to the namespace , When you execute the event, you need to add .bootstrapSwitch. You can register events like this :

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
Event name Description of the incident Parameters
init Triggered at initialization . 'this' Reference point DOM Elements . event ( jQuery Event object)
switchChange Triggered when the state of the switch button changes . 'this' Reference point DOM Elements . event ( jQuery Event object), state (true | false)


copyright notice
author[mb611f1a641bd18],Please bring the original link to reprint, thank you.

Random recommended