1 /*! ============================================================
2 * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
3 * http://www.larentis.eu/
5 * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
6 * http://www.bdmdesign.org/
9 * http://www.larentis.eu/switch/
10 * ============================================================
11 * Licensed under the Apache License, Version 2.0
12 * http://www.apache.org/licenses/LICENSE-2.0
13 * ============================================================ */
18 $.fn['bootstrapSwitch'] = function (method) {
19 var inputSelector = 'input[type!="hidden"]';
22 return this.each(function () {
23 var $element = $(this)
28 , $form = $element.closest('form')
30 , classes = $element.attr('class')
38 $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
39 if (classes.indexOf(el) >= 0)
43 $element.addClass('has-switch');
45 if ($element.data('on') !== undefined)
46 color = "switch-" + $element.data('on');
48 if ($element.data('on-label') !== undefined)
49 onLabel = $element.data('on-label');
51 if ($element.data('off-label') !== undefined)
52 offLabel = $element.data('off-label');
54 if ($element.data('label-icon') !== undefined)
55 icon = $element.data('label-icon');
57 if ($element.data('text-label') !== undefined)
58 textLabel = $element.data('text-label');
60 $switchLeft = $('<span>')
61 .addClass("switch-left")
67 if ($element.data('off') !== undefined)
68 color = "switch-" + $element.data('off');
70 $switchRight = $('<span>')
71 .addClass("switch-right")
79 .attr('for', $element.find(inputSelector).attr('id'));
82 $label.html('<i class="icon ' + icon + '"></i>');
86 $label.html('' + textLabel + '');
89 $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false);
91 if ($element.data('animated') !== false)
92 $div.addClass('switch-animate').data('animated', true);
97 .append($switchRight);
99 $element.find('>div').addClass(
100 $element.find(inputSelector).is(':checked') ? 'switch-on' : 'switch-off'
103 if ($element.find(inputSelector).is(':disabled'))
104 $(this).addClass('deactivate');
106 var changeStatus = function ($this) {
107 if ($element.parent('label').is('.label-change-switch')) {
110 $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
114 $element.on('keydown', function (e) {
115 if (e.keyCode === 32) {
116 e.stopImmediatePropagation();
118 changeStatus($(e.target).find('span:first'));
122 $switchLeft.on('click', function (e) {
123 changeStatus($(this));
126 $switchRight.on('click', function (e) {
127 changeStatus($(this));
130 $element.find(inputSelector).on('change', function (e, skipOnChange) {
132 , $element = $this.parent()
133 , thisState = $this.is(':checked')
134 , state = $element.is('.switch-off');
138 $element.css('left', '');
140 if (state === thisState) {
143 $element.removeClass('switch-off').addClass('switch-on');
144 else $element.removeClass('switch-on').addClass('switch-off');
146 if ($element.data('animated') !== false)
147 $element.addClass("switch-animate");
149 if (typeof skipOnChange === 'boolean' && skipOnChange)
152 $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
156 $element.find('label').on('mousedown touchstart', function (e) {
161 e.stopImmediatePropagation();
163 $this.closest('div').removeClass('switch-animate');
165 if ($this.closest('.has-switch').is('.deactivate')) {
166 $this.unbind('click');
167 } else if ($this.closest('.switch-on').parent().is('.radio-no-uncheck')) {
168 $this.unbind('click');
170 $this.on('mousemove touchmove', function (e) {
171 var $element = $(this).closest('.make-switch')
172 , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
173 , percent = (relativeX / $element.width()) * 100
181 else if (percent > right)
184 $element.find('>div').css('left', (percent - right) + "%")
187 $this.on('click touchend', function (e) {
189 , $myInputBox = $this.siblings('input');
191 e.stopImmediatePropagation();
194 $this.unbind('mouseleave');
197 $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
199 $myInputBox.prop("checked", !$myInputBox.is(":checked"));
202 $myInputBox.trigger('change');
205 $this.on('mouseleave', function (e) {
207 , $myInputBox = $this.siblings('input');
210 e.stopImmediatePropagation();
212 $this.unbind('mouseleave mousemove');
213 $this.trigger('mouseup');
215 $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
218 $this.on('mouseup', function (e) {
219 e.stopImmediatePropagation();
222 $(this).trigger('mouseleave');
227 if ($form.data('bootstrapSwitch') !== 'injected') {
228 $form.bind('reset', function () {
229 setTimeout(function () {
230 $form.find('.make-switch').each(function () {
231 var $input = $(this).find(inputSelector);
233 $input.prop('checked', $input.is(':checked')).trigger('change');
237 $form.data('bootstrapSwitch', 'injected');
242 toggleActivation: function () {
245 $this.toggleClass('deactivate');
246 $this.find(inputSelector).prop('disabled', $this.is('.deactivate'));
248 isActive: function () {
249 return !$(this).hasClass('deactivate');
251 setActive: function (active) {
255 $this.removeClass('deactivate');
256 $this.find(inputSelector).removeAttr('disabled');
259 $this.addClass('deactivate');
260 $this.find(inputSelector).attr('disabled', 'disabled');
263 toggleState: function (skipOnChange) {
264 var $input = $(this).find(':checkbox');
265 $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
267 toggleRadioState: function (skipOnChange) {
268 var $radioinput = $(this).find(':radio');
269 $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
271 toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) {
272 var $radioinput = $(this).find(':radio');
274 $radioinput.not(':checked').trigger('change', skipOnChange);
277 $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
280 setState: function (value, skipOnChange) {
281 $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
283 setOnLabel: function (value) {
284 var $switchLeft = $(this).find(".switch-left");
285 $switchLeft.html(value);
287 setOffLabel: function (value) {
288 var $switchRight = $(this).find(".switch-right");
289 $switchRight.html(value);
291 setOnClass: function (value) {
292 var $switchLeft = $(this).find(".switch-left");
294 if (value !== undefined) {
295 if ($(this).attr('data-on') !== undefined) {
296 color = "switch-" + $(this).attr('data-on')
298 $switchLeft.removeClass(color);
299 color = "switch-" + value;
300 $switchLeft.addClass(color);
303 setOffClass: function (value) {
304 var $switchRight = $(this).find(".switch-right");
306 if (value !== undefined) {
307 if ($(this).attr('data-off') !== undefined) {
308 color = "switch-" + $(this).attr('data-off')
310 $switchRight.removeClass(color);
311 color = "switch-" + value;
312 $switchRight.addClass(color);
315 setAnimated: function (value) {
316 var $element = $(this).find(inputSelector).parent();
317 if (value === undefined) value = false;
318 $element.data('animated', value);
319 $element.attr('data-animated', value);
321 if ($element.data('animated') !== false) {
322 $element.addClass("switch-animate");
324 $element.removeClass("switch-animate");
327 setSizeClass: function (value) {
328 var $element = $(this);
329 var $switchLeft = $element.find(".switch-left");
330 var $switchRight = $element.find(".switch-right");
331 var $label = $element.find("label");
332 $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
334 $switchLeft.removeClass(el);
335 $switchRight.removeClass(el);
336 $label.removeClass(el);
338 $switchLeft.addClass(el);
339 $switchRight.addClass(el);
344 status: function () {
345 return $(this).find(inputSelector).is(':checked');
347 destroy: function () {
348 var $element = $(this)
349 , $div = $element.find('div')
350 , $form = $element.closest('form')
353 $div.find(':not(input)').remove();
355 $inputbox = $div.children();
356 $inputbox.unwrap().unwrap();
358 $inputbox.unbind('change');
361 $form.unbind('reset');
362 $form.removeData('bootstrapSwitch');
370 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
371 else if (typeof method === 'object' || !method)
372 return methods.init.apply(this, arguments);
374 $.error('Method ' + method + ' does not exist!');
380 $('.make-switch')['bootstrapSwitch']();