jQuery Plugin For Sliding Toggle Switches - LC Switch

jQuery Plugin For Sliding Toggle Switches - LC Switch

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


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

  • Publication date: 13.09.2018
  • Source