jQuery Plugin For Switchy Select Options - Switchy

Switchy is a fancy and touch-enabled jQuery plugin that turns a standard html select into a slide/toggle switch that allows the visitor to select items by dragging or clicking the slider.

Basic Usage:

1. Include the latest version of jQuery javascript library on the web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Include jQuery switchy plugin on the web page.

<link href="switchy.css" rel="stylesheet" />
<script type="text/javascript" src="switchy.js"></script> 

3. Include jquery.event.drag.js script for drag events support (Optional)

<script type="text/javascript" src="jquery.event.drag.js"></script> 

4. Include jquery.animate-color.js for animating the background color of the switch when sliding (Optional)

<script type="text/javascript" src="demos/jquery.animate-color.js"></script> 

5. Create an Html select

<select id="switch-me">
<option value="left">Left</option>
<option value="" selected="selected"></option>
<option value="right">Right</option>
</select>

6. The javascript

$(function() {

$('#switch-me').switchy();

$('#switch-me').on('change', function(){

// Animate Switchy Bar background color
var bgColor = '#ccb3dc';

if ($(this).val() == 'female'){
bgColor = '#ed7ab0';
} else if ($(this).val() == 'male'){
bgColor = '#7fcbea';
}

$('.switchy-bar').animate({
backgroundColor: bgColor
});

// Display action in console
var log ='Selected value is "'+$(this).val()+'"';
$('#console').html(log).hide().fadeIn();
});
});

---

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