jQuery Plugin For Sliding Toggle Switches - LC Switch

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

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

How to use it:

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="lc_switch.js"></script>
<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.

$('input').lc_switch();

3. Public functions.

// toggle on
$('input').lcs_on();

// toggle off
$('input').lcs_off();

// destroy
$('input').lcs_destroy();

4. Events.

// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
  var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
  console.log('field changed status: '+ status );
});

// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
  console.log('field is checked');
});

// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
  console.log('field is unchecked');
});

Changelog:

2018-09-13

  • v1.1

This awesome jQuery plugin is developed by LCweb-ita. For more Advanced Usages, please check the demo page or visit the official website.