jQuery Plugin Switch

 以下链接中有很不错的 Switch Demo:

1.New jQuery LightSwitch Plugin

2.Draggy Switch

3."jQuery checkbox v.1.3.0 Beta 1" demo

参照上述demos，自己在 Khavilo Dmitry 所写的 “jquery.checkbox.js ”的基础上略微做了些修改。姑且命名为“jquery.checkbox_backup.js”。

/** * jQuery custom checkboxes *  * Copyright (c) 2008 Khavilo Dmitry (http://widowmaker.kiev.ua/checkbox/) * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * @version 1.3.0 Beta 1 * @author Khavilo Dmitry * @mailto [e-mail]  * @modified By uglyEagle * @modified Date 2012.3.11**/;(function($){/* Little trick to remove event bubbling that causes events recursion */var CB = function(e){if (!e) var e = window.event;e.cancelBubble = true;if (e.stopPropagation) e.stopPropagation();};$.fn.checkbox = function(options) {/* IE6 background flicker fix */try{ document.execCommand('BackgroundImageCache', false, true);} catch (e) {}/* Default settings */var settings = {cls: 'jquery-checkbox', empty: 'empty.png',  checkedTxt:'ON',uncheckedTxt:'OFF',checkedFun:function(){},uncheckedFun:function(){},showSwitchBgImg:false,showSwitchTxt:true};/* Processing settings */if(options) settings = $.extend({},settings,options);/* Adds check/uncheck & disable/enable events */var addEvents = function(object){var checked = object.checked;var disabled = object.disabled;var $object = $(object);if ( object.stateInterval )clearInterval(object.stateInterval);object.stateInterval = setInterval(function() {if ( object.disabled != disabled )$object.trigger( (disabled = !!object.disabled) ? 'disable' : 'enable');if ( object.checked != checked )$object.trigger( (checked = !!object.checked) ? 'check' : 'uncheck');}, 10 /* in miliseconds. Low numbers this can decrease performance on slow computers, high will increase responce time */);return $object;};//try { console.log(this); } catch(e) {}/* Wrapping all passed elements */return this.each(function() {var ch = this; /* Reference to DOM Element*/var $ch = addEvents(ch); /* Adds custom events and returns, jQuery enclosed object *//* Removing wrapper if already applied  */if (ch.wrapper) ch.wrapper.remove();/* Creating wrapper for checkbox and assigning "hover" event *///ch.wrapper = $('<span class="' + settings.cls + '"><span class="mark"><img src="' + settings.empty + '" /></span></span>');ch.wrapper = $('<span class="' + settings.cls + '"><span class="mark"><span class="switch-bar"><span class="switch-bar-status"></span></span></span></span>');ch.wrapperInner = ch.wrapper.children('span:eq(0)');ch.wrapperInnerSwitchBg = ch.wrapper.find('.switch-bar');ch.wrapperInnerSwitchBar = ch.wrapper.find('.switch-bar-status');if(settings.showSwitchBgImg){    ch.wrapperInnerSwitchBg.removeClass('switch-bar').addClass('switch-bar-img');    if(!settings.showSwitchTxt) ch.wrapperInnerSwitchBar.remove();};ch.wrapper.hover(function(e) { ch.wrapperInner.addClass(settings.cls + '-hover');    if(!ch.disabled){            if ( ch.checked){ ch.wrapperInnerSwitchBar.animate({left : 4}, 100);}        else{ch.wrapperInnerSwitchBar.animate({left : ch.wrapperInner.width() - ch.wrapperInnerSwitchBar.width()-6}, 100);};     };CB(e);      },function(e) { ch.wrapperInner.removeClass(settings.cls + '-hover');        if ( ch.checked ){ch.wrapperInnerSwitchBar.stop().css({left :0});}    else{ch.wrapperInnerSwitchBar.stop().css({left : ch.wrapperInner.width() - ch.wrapperInnerSwitchBar.width()-2});};CB(e);     });/* Wrapping checkbox */$ch.css({position: 'absolute', zIndex: -1, visibility: 'hidden'}).after(ch.wrapper);/* Ttying to find "our" label */var label = false;if ($ch.attr('id')){label = $('label[for='+$ch.attr('id')+']');if (!label.length) label = false;}if (!label){/* Trying to utilize "closest()" from jQuery 1.3+ */label = $ch.closest ? $ch.closest('label') : $ch.parents('label:eq(0)');if (!label.length) label = false;}/* Labe found, applying event hanlers */if (label){label.hover(function(e) { ch.wrapper.trigger('mouseover', [e]); },function(e) { ch.wrapper.trigger('mouseout', [e]); });label.click(function(e) { $ch.trigger('click',[e]); CB(e); return false;});}ch.wrapper.click(function(e) { $ch.trigger('click',[e]); CB(e); return false;});$ch.click(function(e) { CB(e); });$ch.bind('disable', function() { ch.wrapperInner.addClass(settings.cls+'-disabled');}).bind('enable', function() { ch.wrapperInner.removeClass(settings.cls+'-disabled');});$ch.bind('check', function() { ch.wrapper.addClass(settings.cls+'-checked' );            ch.wrapperInnerSwitchBar.animate({left : 0}, 100);ch.wrapperInnerSwitchBar.text(settings.checkedTxt);            if(settings.checkedFun) settings.checkedFun();        })   .bind('uncheck', function() { ch.wrapper.removeClass(settings.cls+'-checked' );       ch.wrapperInnerSwitchBar.animate({left : ch.wrapperInner.width() - ch.wrapperInnerSwitchBar.width()-2}, 100);       ch.wrapperInnerSwitchBar.text(settings.uncheckedTxt);       if(settings.uncheckedFun) settings.uncheckedFun();   });/* Disable image drag-n-drop for IE *///$('img', ch.wrapper).bind('dragstart', function () {return false;}).bind('mousedown', function () {return false;});/* Firefox antiselection hack */if ( window.getSelection )ch.wrapper.css('MozUserSelect', 'none');/* Applying checkbox state */if ( ch.checked ){ch.wrapper.addClass(settings.cls + '-checked');ch.wrapperInnerSwitchBar.css({left : 0});ch.wrapperInnerSwitchBar.text(settings.checkedTxt);}else{ch.wrapperInnerSwitchBar.css({left : ch.wrapperInner.width() - ch.wrapperInnerSwitchBar.width()-2});ch.wrapperInnerSwitchBar.text(settings.uncheckedTxt);};if ( ch.disabled ){ch.wrapperInner.addClass(settings.cls + '-disabled');};});}})(jQuery);

与之相应的CSS文件“jquery.checkbox_backup.css”如下：

/*/*============  1. 不使用任何背景图片  ===================*/.jquery-checkbox       {display: inline; font-size: 16px; line-height: 20px; cursor: pointer; cursor: hand;}.jquery-checkbox .mark {display: inline;}.jquery-checkbox .switch-bar,.jquery-checkbox .switch-bar-img{width: 60px;height: 20px;display: inline-block;}.jquery-checkbox .switch-bar{background: #f0f0f0;position: relative;border: 1px solid #444;border: 1px solid rgba(0,0,0,0.3);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 5px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.5);-moz-box-shadow: inset 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 5px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.5);box-shadow: inset 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 5px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.5);}.jquery-checkbox .switch-bar-status{height: 20px;width: 40px;background: #666666;background: rgba(0,0,0,0.6);position: absolute;display: inline-block;text-align: center;color: #FFF;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 5px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.5);-moz-box-shadow: inset 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 5px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.5);box-shadow: inset 0px 0px 5px rgba(255,255,255,0.3), 0px 0px 5px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(0,0,0,0.2), inset 0px -1px 0px rgba(255,255,255,0.5);}.jquery-checkbox-checked .switch-bar-status{background: #0066CC;background: rgba(0,58,147,0.8);}.jquery-checkbox-disabled .switch-bar-status{background: #c0c0c0;background: rgba(0,0,0,0.2);}/*============  2. 所使用的背景图片不包含边框及文字  ===================.jquery-checkbox .switch-bar-img{position: relative;border: 1px solid #444;border: 1px solid rgba(0,0,0,0.3);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.jquery-checkbox .switch-bar-img{vertical-align: middle;background: transparent url(switch.gif) repeat-x;}.jquery-checkbox .switch-bar-img{background-position: 0px 0px;}.jquery-checkbox-hover .switch-bar-img{background-position: 0px -30px;}.jquery-checkbox-checked .switch-bar-img{background-position: 0px 0px;}.jquery-checkbox-checked .jquery-checkbox-hover .switch-bar-img{background-position: 0px -30px;}.jquery-checkbox-disabled .switch-bar-img{background-position: 0px 0px;}.jquery-checkbox-checked .jquery-checkbox-disabled .switch-bar-img{background-position: 0px 0px;}*//*============  3. 所使用的图片包含边框及文字  ===================.jquery-checkbox .switch-bar-img{position: relative;border: none;}.jquery-checkbox .switch-bar-img{vertical-align: middle;background: transparent url(checkbox.png) no-repeat;}.jquery-checkbox .switch-bar-img{background-position: 0px 0px;}.jquery-checkbox-hover .switch-bar-img{background-position: 0px -20px;}.jquery-checkbox-checked .switch-bar-img{background-position: 0px -40px;}.jquery-checkbox-checked .jquery-checkbox-hover .switch-bar-img{background-position: 0px -60px;}.jquery-checkbox-disabled .switch-bar-img{background-position: 0px -80px;}.jquery-checkbox-checked .jquery-checkbox-disabled .switch-bar-img{background-position: 0px -100px;}*/

HTML文件如下：

<!DOCTYPE html><html><head>    <title>jQuery Switch demo</title>    <link rel="stylesheet" href="jquery.checkbox_backup.css" />    <script type="text/javascript" src="../JS/jquery-1.4.4.js"></script>    <script type="text/javascript" src="jquery.checkbox_backup.js"></script>    <script type="text/javascript">var a=function(){alert("Checked");};var b=function(){alert("UnChecked");};$(function(){$('input:checkbox').checkbox({checkedFun:a,uncheckedFun:b});$('input:radio').checkbox({showSwitchBgImg:false,showSwitchTxt:false});});</script></head><body>    <div style="width: 600px; margin: 0 auto;">                <input type="checkbox" name="checkbox" id="Checkbox" checked="checked" /><label for="Checkbox">This is Checkbox</label>        <div>            <input type="radio" name="sex" value="1" />radio1            <input type="radio" name="sex" value="2" checked="checked" />radio2            <input type="radio" name="sex" value="3" />radio3            <input type="radio" name="sex" value="4" disabled="disabled" />radio4        </div>    </div></body></html>

效果图如下：