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 it turns this..

.. into this!


Supports any browser, also old Internet Explorer, up to version 7.

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


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-statuschangelcs-onlcs-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');
});


Enjoyed this freebie and want to show some appreciation?

Offer me a cofee or two to continue coding!



lcwebLC Switch – jQuery Plugin