LC Switch

jQuery Plugin

Superlight jQuery plugin improving forms look and functionality.

Give a modern and flat look to your applications and take advantage of events and public functions.
Everything in just 5KB, all inclisive!

Basically turns this..

.. into this!

Basic Implementation

Only requirement is jQuery v1.4.2 (or later), this is a basic implementation in a standard web page structure
<!doctype html>
<html>
    <head>
        <link href="lc_switch.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
        <script src="lc_switch.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form>
           <input type="checkbox" name="sample" value="1" />
        </form>

        <script type="text/javascript">
        $(document).ready(function(e) {
             $('input').lc_switch();
        });
        </script>
    </body>
</html>

Changing texts

You can obviously customize shown texts, or also completely hide them. Just declare two custom strings during plugin initialization:

$('input').lc_switch('on-string', 'off-string');

Public functions

There are also three public functions you can use on initialized elements

Remotely check one or more fields
$('the-field-selector').lcs_on();
Remotely un-check one or more fields
$('the-field-selector').lcs_off();
Restores original structure on one or more fields
$('the-field-selector').lcs_destroy();

Events

LC Switch also triggers three events to help developers in advanced usages. You can bind fields status change or know whether they are checked or not.
Event names are: lcs-statuschange - lcs-on - lcs-on

// 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 field is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
     console.log('field is unchecked');
});
lcwebLC Switch – jQuery Plugin