/******************************************************* * jQuery radioSwitch plugin * * **************************************************** * * jquery.radioSwitch.js * * Author: Ammon Casey * * Website: http://www.brokenparadigmlabs.com * * https://github.com/ammonkc/radioSwitch * * Twitter: @ammonkc * * Date: 12.13.2010 * * * * Copyright (c) 2010, Ammon Casey * * licensed under the MIT license: * * http://www.opensource.org/licenses/mit-license.php * ********************************************************/ check the demo source for examples of how to use the plugin. There are many options that can be passed via the first parameter. The second parameter is for a callback function. Basic usage: The radio button set needs to be wrapped in a container. Call the plugin on that container. Each radio button needs to have a label with the for attribute [for=""] pointing to the corresponding radio button's id. HTML: <div class="radio-container"> /** radio buttons and labels go in here. **/ <input type="radio" name="radioset" id="radio1" value="one"/> <label for="radio1">one</label> <input type="radio" name="radioset" id="radio2" value="two"/> <label for="radio2">Two</label> <input type="radio" name="radioset" id="radio3" value="three"/> <label for="radio3">Three</label> </div> Javascript: $(".radio-container").radioSwitch({width:60}); Defaults: var settings = { track_class: 'radioSwitch-track', handle_class: 'radioSwitch-handle', label_class: 'radioSwitch-label', mouse_over: 'pointer', mouse_out: 'default', hide_radio: true, sync_checked: true, use_images: false, speed: '250', width: 50, height: 25, radius: 4, padding: 1, track_img: 'images/switch_track.png', track_bg_color: '#5f6777', track_dropshadow_color: 'rgba(255, 255, 255, 0.15)', handle_img: 'images/switch_handle.png', handle_bg_color: '#f9f9f9', handle_border_color: '#d0d0d0', label_text_color: "#ffffff", label_font_size: 12 };