提交 | 用户 | 时间
|
58d006
|
1 |
/*! ============================================================ |
A |
2 |
* bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru |
|
3 |
* http://www.larentis.eu/ |
|
4 |
* |
|
5 |
* Enhanced for radiobuttons by Stein, Peter @BdMdesigN |
|
6 |
* http://www.bdmdesign.org/ |
|
7 |
* |
|
8 |
* Project site: |
|
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 |
* ============================================================ */ |
|
14 |
|
|
15 |
!function ($) { |
|
16 |
"use strict"; |
|
17 |
|
|
18 |
$.fn['bootstrapSwitch'] = function (method) { |
|
19 |
var inputSelector = 'input[type!="hidden"]'; |
|
20 |
var methods = { |
|
21 |
init: function () { |
|
22 |
return this.each(function () { |
|
23 |
var $element = $(this) |
|
24 |
, $div |
|
25 |
, $switchLeft |
|
26 |
, $switchRight |
|
27 |
, $label |
|
28 |
, $form = $element.closest('form') |
|
29 |
, myClasses = "" |
|
30 |
, classes = $element.attr('class') |
|
31 |
, color |
|
32 |
, moving |
|
33 |
, onLabel = "ON" |
|
34 |
, offLabel = "OFF" |
|
35 |
, icon = false |
|
36 |
, textLabel = false; |
|
37 |
|
|
38 |
$.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) { |
|
39 |
if (classes.indexOf(el) >= 0) |
|
40 |
myClasses = el; |
|
41 |
}); |
|
42 |
|
|
43 |
$element.addClass('has-switch'); |
|
44 |
|
|
45 |
if ($element.data('on') !== undefined) |
|
46 |
color = "switch-" + $element.data('on'); |
|
47 |
|
|
48 |
if ($element.data('on-label') !== undefined) |
|
49 |
onLabel = $element.data('on-label'); |
|
50 |
|
|
51 |
if ($element.data('off-label') !== undefined) |
|
52 |
offLabel = $element.data('off-label'); |
|
53 |
|
|
54 |
if ($element.data('label-icon') !== undefined) |
|
55 |
icon = $element.data('label-icon'); |
|
56 |
|
|
57 |
if ($element.data('text-label') !== undefined) |
|
58 |
textLabel = $element.data('text-label'); |
|
59 |
|
|
60 |
$switchLeft = $('<span>') |
|
61 |
.addClass("switch-left") |
|
62 |
.addClass(myClasses) |
|
63 |
.addClass(color) |
|
64 |
.html(onLabel); |
|
65 |
|
|
66 |
color = ''; |
|
67 |
if ($element.data('off') !== undefined) |
|
68 |
color = "switch-" + $element.data('off'); |
|
69 |
|
|
70 |
$switchRight = $('<span>') |
|
71 |
.addClass("switch-right") |
|
72 |
.addClass(myClasses) |
|
73 |
.addClass(color) |
|
74 |
.html(offLabel); |
|
75 |
|
|
76 |
$label = $('<label>') |
|
77 |
.html(" ") |
|
78 |
.addClass(myClasses) |
|
79 |
.attr('for', $element.find(inputSelector).attr('id')); |
|
80 |
|
|
81 |
if (icon) { |
|
82 |
$label.html('<i class="icon ' + icon + '"></i>'); |
|
83 |
} |
|
84 |
|
|
85 |
if (textLabel) { |
|
86 |
$label.html('' + textLabel + ''); |
|
87 |
} |
|
88 |
|
|
89 |
$div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false); |
|
90 |
|
|
91 |
if ($element.data('animated') !== false) |
|
92 |
$div.addClass('switch-animate').data('animated', true); |
|
93 |
|
|
94 |
$div |
|
95 |
.append($switchLeft) |
|
96 |
.append($label) |
|
97 |
.append($switchRight); |
|
98 |
|
|
99 |
$element.find('>div').addClass( |
|
100 |
$element.find(inputSelector).is(':checked') ? 'switch-on' : 'switch-off' |
|
101 |
); |
|
102 |
|
|
103 |
if ($element.find(inputSelector).is(':disabled')) |
|
104 |
$(this).addClass('deactivate'); |
|
105 |
|
|
106 |
var changeStatus = function ($this) { |
|
107 |
if ($element.parent('label').is('.label-change-switch')) { |
|
108 |
|
|
109 |
} else { |
|
110 |
$this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click'); |
|
111 |
} |
|
112 |
}; |
|
113 |
|
|
114 |
$element.on('keydown', function (e) { |
|
115 |
if (e.keyCode === 32) { |
|
116 |
e.stopImmediatePropagation(); |
|
117 |
e.preventDefault(); |
|
118 |
changeStatus($(e.target).find('span:first')); |
|
119 |
} |
|
120 |
}); |
|
121 |
|
|
122 |
$switchLeft.on('click', function (e) { |
|
123 |
changeStatus($(this)); |
|
124 |
}); |
|
125 |
|
|
126 |
$switchRight.on('click', function (e) { |
|
127 |
changeStatus($(this)); |
|
128 |
}); |
|
129 |
|
|
130 |
$element.find(inputSelector).on('change', function (e, skipOnChange) { |
|
131 |
var $this = $(this) |
|
132 |
, $element = $this.parent() |
|
133 |
, thisState = $this.is(':checked') |
|
134 |
, state = $element.is('.switch-off'); |
|
135 |
|
|
136 |
e.preventDefault(); |
|
137 |
|
|
138 |
$element.css('left', ''); |
|
139 |
|
|
140 |
if (state === thisState) { |
|
141 |
|
|
142 |
if (thisState) |
|
143 |
$element.removeClass('switch-off').addClass('switch-on'); |
|
144 |
else $element.removeClass('switch-on').addClass('switch-off'); |
|
145 |
|
|
146 |
if ($element.data('animated') !== false) |
|
147 |
$element.addClass("switch-animate"); |
|
148 |
|
|
149 |
if (typeof skipOnChange === 'boolean' && skipOnChange) |
|
150 |
return; |
|
151 |
|
|
152 |
$element.parent().trigger('switch-change', {'el': $this, 'value': thisState}) |
|
153 |
} |
|
154 |
}); |
|
155 |
|
|
156 |
$element.find('label').on('mousedown touchstart', function (e) { |
|
157 |
var $this = $(this); |
|
158 |
moving = false; |
|
159 |
|
|
160 |
e.preventDefault(); |
|
161 |
e.stopImmediatePropagation(); |
|
162 |
|
|
163 |
$this.closest('div').removeClass('switch-animate'); |
|
164 |
|
|
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'); |
|
169 |
} else { |
|
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 |
|
174 |
, left = 25 |
|
175 |
, right = 75; |
|
176 |
|
|
177 |
moving = true; |
|
178 |
|
|
179 |
if (percent < left) |
|
180 |
percent = left; |
|
181 |
else if (percent > right) |
|
182 |
percent = right; |
|
183 |
|
|
184 |
$element.find('>div').css('left', (percent - right) + "%") |
|
185 |
}); |
|
186 |
|
|
187 |
$this.on('click touchend', function (e) { |
|
188 |
var $this = $(this) |
|
189 |
, $myInputBox = $this.siblings('input'); |
|
190 |
|
|
191 |
e.stopImmediatePropagation(); |
|
192 |
e.preventDefault(); |
|
193 |
|
|
194 |
$this.unbind('mouseleave'); |
|
195 |
|
|
196 |
if (moving) |
|
197 |
$myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)); |
|
198 |
else |
|
199 |
$myInputBox.prop("checked", !$myInputBox.is(":checked")); |
|
200 |
|
|
201 |
moving = false; |
|
202 |
$myInputBox.trigger('change'); |
|
203 |
}); |
|
204 |
|
|
205 |
$this.on('mouseleave', function (e) { |
|
206 |
var $this = $(this) |
|
207 |
, $myInputBox = $this.siblings('input'); |
|
208 |
|
|
209 |
e.preventDefault(); |
|
210 |
e.stopImmediatePropagation(); |
|
211 |
|
|
212 |
$this.unbind('mouseleave mousemove'); |
|
213 |
$this.trigger('mouseup'); |
|
214 |
|
|
215 |
$myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change'); |
|
216 |
}); |
|
217 |
|
|
218 |
$this.on('mouseup', function (e) { |
|
219 |
e.stopImmediatePropagation(); |
|
220 |
e.preventDefault(); |
|
221 |
|
|
222 |
$(this).trigger('mouseleave'); |
|
223 |
}); |
|
224 |
} |
|
225 |
}); |
|
226 |
|
|
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); |
|
232 |
|
|
233 |
$input.prop('checked', $input.is(':checked')).trigger('change'); |
|
234 |
}); |
|
235 |
}, 1); |
|
236 |
}); |
|
237 |
$form.data('bootstrapSwitch', 'injected'); |
|
238 |
} |
|
239 |
} |
|
240 |
); |
|
241 |
}, |
|
242 |
toggleActivation: function () { |
|
243 |
var $this = $(this); |
|
244 |
|
|
245 |
$this.toggleClass('deactivate'); |
|
246 |
$this.find(inputSelector).prop('disabled', $this.is('.deactivate')); |
|
247 |
}, |
|
248 |
isActive: function () { |
|
249 |
return !$(this).hasClass('deactivate'); |
|
250 |
}, |
|
251 |
setActive: function (active) { |
|
252 |
var $this = $(this); |
|
253 |
|
|
254 |
if (active) { |
|
255 |
$this.removeClass('deactivate'); |
|
256 |
$this.find(inputSelector).removeAttr('disabled'); |
|
257 |
} |
|
258 |
else { |
|
259 |
$this.addClass('deactivate'); |
|
260 |
$this.find(inputSelector).attr('disabled', 'disabled'); |
|
261 |
} |
|
262 |
}, |
|
263 |
toggleState: function (skipOnChange) { |
|
264 |
var $input = $(this).find(':checkbox'); |
|
265 |
$input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange); |
|
266 |
}, |
|
267 |
toggleRadioState: function (skipOnChange) { |
|
268 |
var $radioinput = $(this).find(':radio'); |
|
269 |
$radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange); |
|
270 |
}, |
|
271 |
toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) { |
|
272 |
var $radioinput = $(this).find(':radio'); |
|
273 |
if (uncheck) { |
|
274 |
$radioinput.not(':checked').trigger('change', skipOnChange); |
|
275 |
} |
|
276 |
else { |
|
277 |
$radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange); |
|
278 |
} |
|
279 |
}, |
|
280 |
setState: function (value, skipOnChange) { |
|
281 |
$(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange); |
|
282 |
}, |
|
283 |
setOnLabel: function (value) { |
|
284 |
var $switchLeft = $(this).find(".switch-left"); |
|
285 |
$switchLeft.html(value); |
|
286 |
}, |
|
287 |
setOffLabel: function (value) { |
|
288 |
var $switchRight = $(this).find(".switch-right"); |
|
289 |
$switchRight.html(value); |
|
290 |
}, |
|
291 |
setOnClass: function (value) { |
|
292 |
var $switchLeft = $(this).find(".switch-left"); |
|
293 |
var color = ''; |
|
294 |
if (value !== undefined) { |
|
295 |
if ($(this).attr('data-on') !== undefined) { |
|
296 |
color = "switch-" + $(this).attr('data-on') |
|
297 |
} |
|
298 |
$switchLeft.removeClass(color); |
|
299 |
color = "switch-" + value; |
|
300 |
$switchLeft.addClass(color); |
|
301 |
} |
|
302 |
}, |
|
303 |
setOffClass: function (value) { |
|
304 |
var $switchRight = $(this).find(".switch-right"); |
|
305 |
var color = ''; |
|
306 |
if (value !== undefined) { |
|
307 |
if ($(this).attr('data-off') !== undefined) { |
|
308 |
color = "switch-" + $(this).attr('data-off') |
|
309 |
} |
|
310 |
$switchRight.removeClass(color); |
|
311 |
color = "switch-" + value; |
|
312 |
$switchRight.addClass(color); |
|
313 |
} |
|
314 |
}, |
|
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); |
|
320 |
|
|
321 |
if ($element.data('animated') !== false) { |
|
322 |
$element.addClass("switch-animate"); |
|
323 |
} else { |
|
324 |
$element.removeClass("switch-animate"); |
|
325 |
} |
|
326 |
}, |
|
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) { |
|
333 |
if (el !== value) { |
|
334 |
$switchLeft.removeClass(el); |
|
335 |
$switchRight.removeClass(el); |
|
336 |
$label.removeClass(el); |
|
337 |
} else { |
|
338 |
$switchLeft.addClass(el); |
|
339 |
$switchRight.addClass(el); |
|
340 |
$label.addClass(el); |
|
341 |
} |
|
342 |
}); |
|
343 |
}, |
|
344 |
status: function () { |
|
345 |
return $(this).find(inputSelector).is(':checked'); |
|
346 |
}, |
|
347 |
destroy: function () { |
|
348 |
var $element = $(this) |
|
349 |
, $div = $element.find('div') |
|
350 |
, $form = $element.closest('form') |
|
351 |
, $inputbox; |
|
352 |
|
|
353 |
$div.find(':not(input)').remove(); |
|
354 |
|
|
355 |
$inputbox = $div.children(); |
|
356 |
$inputbox.unwrap().unwrap(); |
|
357 |
|
|
358 |
$inputbox.unbind('change'); |
|
359 |
|
|
360 |
if ($form) { |
|
361 |
$form.unbind('reset'); |
|
362 |
$form.removeData('bootstrapSwitch'); |
|
363 |
} |
|
364 |
|
|
365 |
return $inputbox; |
|
366 |
} |
|
367 |
}; |
|
368 |
|
|
369 |
if (methods[method]) |
|
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); |
|
373 |
else |
|
374 |
$.error('Method ' + method + ' does not exist!'); |
|
375 |
}; |
|
376 |
}(jQuery); |
|
377 |
|
|
378 |
(function ($) { |
|
379 |
$(function () { |
|
380 |
$('.make-switch')['bootstrapSwitch'](); |
|
381 |
}); |
|
382 |
})(jQuery); |