root / static / js / engage.itoggle-min.js @ c78c4531
History | View | Annotate | Download (3.7 kB)
| 1 |
/*---------------
|
|---|---|
| 2 |
* jQuery iToggle Plugin by Engage Interactive
|
| 3 |
* Examples and documentation at: http://labs.engageinteractive.co.uk/itoggle/
|
| 4 |
* Copyright (c) 2009 Engage Interactive
|
| 5 |
* Version: 1.0 (10-JUN-2009)
|
| 6 |
* Dual licensed under the MIT and GPL licenses:
|
| 7 |
* http://www.opensource.org/licenses/mit-license.php
|
| 8 |
* http://www.gnu.org/licenses/gpl.html
|
| 9 |
* Requires: jQuery v1.3 or later
|
| 10 |
---------------*/
|
| 11 |
|
| 12 |
(function($){ |
| 13 |
$.fn.iToggle = function(options) { |
| 14 |
|
| 15 |
clickEnabled = true;
|
| 16 |
|
| 17 |
var defaults = {
|
| 18 |
type: 'checkbox', |
| 19 |
keepLabel: true, |
| 20 |
easing: false, |
| 21 |
speed: 200, |
| 22 |
onClick: function(){}, |
| 23 |
onClickOn: function(){}, |
| 24 |
onClickOff: function(){}, |
| 25 |
onSlide: function(){}, |
| 26 |
onSlideOn: function(){}, |
| 27 |
onSlideOff: function(){} |
| 28 |
}, |
| 29 |
settings = $.extend({}, defaults, options);
|
| 30 |
|
| 31 |
this.each(function(){ |
| 32 |
var $this = $(this); |
| 33 |
if($this.attr('tagName') == 'INPUT'){ |
| 34 |
var id=$this.attr('id'); |
| 35 |
label(settings.keepLabel, id); |
| 36 |
$this.addClass('iT_checkbox').before('<label class="itoggle" for="'+id+'"><span></span></label>'); |
| 37 |
if($this.attr('checked')){ |
| 38 |
$this.prev('label').addClass('iTon'); |
| 39 |
}else{
|
| 40 |
$this.prev('label').addClass('iToff'); |
| 41 |
} |
| 42 |
}else{
|
| 43 |
$this.children('input:'+settings.type).each(function(){ |
| 44 |
var id = $(this).attr('id'); |
| 45 |
label(settings.keepLabel, id); |
| 46 |
$(this).addClass('iT_checkbox').before('<label class="itoggle" for="'+id+'"><span></span></label>'); |
| 47 |
if($(this).attr('checked')){ |
| 48 |
$(this).prev('label').addClass('iTon'); |
| 49 |
}else{
|
| 50 |
$(this).prev('label').addClass('iToff'); |
| 51 |
} |
| 52 |
if(settings.type == 'radio'){ |
| 53 |
$(this).prev('label').addClass('iT_radio'); |
| 54 |
} |
| 55 |
}); |
| 56 |
} |
| 57 |
}); |
| 58 |
|
| 59 |
function label(e, id){ |
| 60 |
if(e == true){ |
| 61 |
if(settings.type == 'radio'){ |
| 62 |
$('label[for='+id+']').addClass('ilabel_radio'); |
| 63 |
}else{
|
| 64 |
$('label[for='+id+']').addClass('ilabel'); |
| 65 |
} |
| 66 |
}else{
|
| 67 |
$('label[for='+id+']').remove(); |
| 68 |
} |
| 69 |
} |
| 70 |
|
| 71 |
$('label.itoggle').click(function(){ |
| 72 |
if(clickEnabled == true){ |
| 73 |
clickEnabled = false;
|
| 74 |
if($(this).hasClass('iT_radio')){ |
| 75 |
if($(this).hasClass('iTon')){ |
| 76 |
clickEnabled = true;
|
| 77 |
}else{
|
| 78 |
slide($(this), true); |
| 79 |
} |
| 80 |
}else{
|
| 81 |
slide($(this)); |
| 82 |
} |
| 83 |
} |
| 84 |
return false; |
| 85 |
}); |
| 86 |
$('label.ilabel').click(function(){ |
| 87 |
if(clickEnabled == true){ |
| 88 |
clickEnabled = false;
|
| 89 |
slide($(this).next('label.itoggle')); |
| 90 |
} |
| 91 |
return false; |
| 92 |
}); |
| 93 |
|
| 94 |
function slide($object, radio){ |
| 95 |
settings.onClick.call($object); //Generic click callback for click at any state |
| 96 |
h=$object.innerHeight();
|
| 97 |
t=$object.attr('for'); |
| 98 |
if($object.hasClass('iTon')){ |
| 99 |
settings.onClickOff.call($object); //Click that turns the toggle to off position |
| 100 |
$object.animate({backgroundPosition:'100% -'+h+'px'}, settings.speed, settings.easing, function(){ |
| 101 |
$object.removeClass('iTon').addClass('iToff'); |
| 102 |
clickEnabled = true;
|
| 103 |
settings.onSlide.call(this); //Generic callback after the slide has finnished |
| 104 |
settings.onSlideOff.call(this); //Callback after the slide turns the toggle off |
| 105 |
}); |
| 106 |
$('input#'+t).removeAttr('checked'); |
| 107 |
}else{
|
| 108 |
settings.onClickOn.call($object);
|
| 109 |
$object.animate({backgroundPosition:'0% -'+h+'px'}, settings.speed, settings.easing, function(){ |
| 110 |
$object.removeClass('iToff').addClass('iTon'); |
| 111 |
clickEnabled = true;
|
| 112 |
settings.onSlide.call(this); //Generic callback after the slide has finnished |
| 113 |
settings.onSlideOn.call(this); //Callback after the slide turns the toggle on |
| 114 |
}); |
| 115 |
$('input#'+t).attr('checked','checked'); |
| 116 |
} |
| 117 |
if(radio == true){ |
| 118 |
name = $('#'+t).attr('name'); |
| 119 |
slide($object.siblings('label[for]')); |
| 120 |
} |
| 121 |
} |
| 122 |
|
| 123 |
}; |
| 124 |
})(jQuery); |