jQuery Plugin For Sliding Toggle Switches LC Switch - Free Download JavaScript Plugin For Sliding Toggle Switches - LC Switch

Free Download JavaScript Plugin For Sliding Toggle Switches – LC Switch

By Posted on

This time I will share jQuery Plugin and tutorial about JavaScript Plugin For Sliding Toggle Switches – LC Switch, hope it will help you in programming stack.

jQuery Plugin For Sliding Toggle Switches LC Switch - Free Download JavaScript Plugin For Sliding Toggle Switches - LC Switch
File Size: 22.6 KB
Views Total: 30687
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

LC Switch is a tiny jQuery and Vanilla JS plugin that converts default checkbox & radio inputs into pretty switches or toggle buttons, with smooth sliding effects powered by CSS3 transitions.

Table Of Contents:

How to use it (jQuery):

1. Import jQuery library and the jQuery LC Switch plugin’s files into your project.

view source
1 <script src="jquery.min.js"></script>
2 <script src="lc_switch.js"></script>
3 <link rel="stylesheet" href="lc_switch.css" />

2. Call the plugin on the checkbox & radio inputs and done. The plugin will take care of the rest.

view source
1 $('input').lc_switch();

3. Public functions.

view source
1 // toggle on
2 $('input').lcs_on();
3  
4 // toggle off
5 $('input').lcs_off();
6  
7 // destroy
8 $('input').lcs_destroy();

4. Events.

view source
01 // triggered each time a field changes status
02 $('body').delegate('.lcs_check', 'lcs-statuschange', function() {
03   var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
04   console.log('field changed status: '+ status );
05 });
06  
07 // triggered each time a field is checked
08 $('body').delegate('.lcs_check', 'lcs-on', function() {
09   console.log('field is checked');
10 });
11  
12 // triggered each time a is unchecked
13 $('body').delegate('.lcs_check', 'lcs-off', function() {
14   console.log('field is unchecked');
15 });

How to use it (Vanilla):

1. Download the LC Switch V2 and import the lc_switch.js into the document.

view source
1 <script src="lc_switch.js"></script>

2. Attach the plugin to the checkbox & radio inputs and done.

view source
1 lc_switch('input[type=checkbox], input[type=radio]');

3. Possible plugin options to customize the switch.

view source
01 lc_switch('input[type=checkbox], input[type=radio]', {
02  
03     // ON text
04     on_txt: 'ON',
05      
06     // OFF text
07     off_txt: 'OFF',
08  
09     // Custom ON color. Supports gradients
10     on_color: false,
11  
12     // enable compact mode
13     compact_mode: false
14  
15 });

4. API methods

view source
01 // toggle on
02 lcs_on(instance);
03  
04 // toggle off
05 lcs_off(instance);
06  
07 // toggle target field
08 lcs_toggle(instance);
09  
10 // disable
11 lcs_disable(instance);
12  
13 // enable
14 lcs_enable(instance);
15  
16 // up<a href="https://www.jqueryscript.net/time-clock/">date</a>
17 lcs_update(instance);
18  
19 // destroy
20 lcs_destroy(instance);

5. Event handlers

view source
01 document.querySelectorAll('input[type=checkbox], input[type=radio]').forEach(function(el) {
02  
03     el.addEventListener('lcs-statuschange', function(){
04       // ...
05     });
06  
07     el.addEventListener('lcs-on', function(){
08       // ...
09     });
10  
11     el.addEventListener('lcs-off', function(){
12       // ...
13     });
14      
15     el.addEventListener('lcs-enabled', function(){
16       // ...
17     });
18  
19     el.addEventListener('lcs-disabled', function(){
20       // ...
21     });
22  
23 });

Changelog:

v2.0.3 (2021-03-18)

  • Events now “bubbles” for better (jQuery) compatibility

v2.0.2 (2021-03-02)

  • fixed lcs-on event at line 261

v2.0.1 (2021-02-09)

  • fixed minor bugs

v2 (2021-02-02)

  • 100% vanilla javascript
  • unique JS file
  • added enable/disable functions
  • added lcs_update() function to sync HTML changes
  • added compact mode
  • added custom “on” color

2018-09-13

  • v1.1

Related posts: