-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.lightswitch.js
executable file
·84 lines (78 loc) · 3.27 KB
/
jquery.lightswitch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/*
* jQuery LightSwitch plugin
* @author [email protected] - http://www.catchmyfame.com
* @version 1.0.1
* @date December 16, 2010
* @category jQuery plugin
* @copyright (c) 2010 [email protected] (www.catchmyfame.com)
* @license CC Attribution-Share Alike 3.0 - http://creativecommons.org/licenses/by-sa/3.0/
*/
(function($){
$.fn.extend({
lightSwitch: function(options)
{
var defaults =
{
animSpeed : 120,
hoverSpeed : 100,
switchImg : 'switch.png',
switchImgCover: 'switchplate.png',
switchImgCoverWidth : '63px',
switchImgCoverHeight : '18px',
disabledImg : 'disabled.png',
onShift : '0px 0px',
offShift : '-37px 0px',
peekOff : '-6px 0px',
peekOn : '-31px 0px'
};
var options = $.extend(defaults, options);
return this.each(function() {
var o=options;
var obj = $(this);
if($(this).attr('disabled'))
{
$(this).css({'display':'none'}).after('<span><img src="'+o.disabledImg+'" /></span>');
}
else
{
$(this).css({'display':'none'}).after('<span class="switch"><img src="'+o.switchImgCover+'" width="'+o.switchImgCoverWidth+'" height="'+o.switchImgCoverHeight+'" /></span>'); //'display':'none'
}
$(this).next('span.switch').css({'display':'inline-block','background-image':'url("'+o.switchImg+'")','background-repeat':'no-repeat','overflow':'hidden','cursor':'pointer','margin-right':'2px'});
$(this).next('span.switch').click(function(){
// When we click any span image for a radio button, animate the previously selected radio button to 'off'.
if($(this).prev().is(':radio'))
{
radioGroupName = $(this).prev().attr('name');
$('input[name="'+radioGroupName+'"]'+':checked + span').stop().animate({'background-position':o.offShift},o.animSpeed);
}
if($(this).prev().is(':checked'))
{
$(this).stop().animate({'background-position':o.offShift},o.animSpeed); // off
$(this).prev().removeAttr('checked');
}
else
{
$(this).stop().animate({'background-position':o.onShift},o.animSpeed); // on
if($(this).prev().is(':radio')) $('input[name="'+radioGroupName+'"]'+':checked').removeAttr('checked');
$(this).prev('input').attr('checked','checked');
}
}).hover(function(){
$(this).stop().animate({'background-position': $(this).prev().is(':checked') ? o.peekOff : o.peekOn},o.hoverSpeed);
},function(){
$(this).stop().animate({'background-position': $(this).prev().is(':checked') ? o.onShift :o.offShift},o.hoverSpeed);
});
$(this).next('span.switch').css({'background-position': $(this).is(':checked') ? o.onShift : o.offShift }); // setup default states
$('input + span').live("click", function() { return false; });
$(this).change(function(){
radioGroupName = $(this).attr('name');
if($(this).is(':radio'))
{
$(this).stop().animate({'background-position':o.onShift},o.animSpeed);
$('input[name="'+radioGroupName+'"]'+' + span').stop().animate({'background-position':o.offShift},o.animSpeed);
}
$(this).next('span').stop().animate({'background-position': $(this).is(':checked') ? o.onShift :o.offShift},o.animSpeed);
});
});
}
});
})(jQuery);