|
1 | 1 | /* |
2 | | - * jQuery Form Styler v1.7.5 |
| 2 | + * jQuery Form Styler v1.7.6 |
3 | 3 | * https://github.com/Dimox/jQueryFormStyler |
4 | 4 | * |
5 | 5 | * Copyright 2012-2016 Dimox (http://dimox.name/) |
6 | 6 | * Released under the MIT license. |
7 | 7 | * |
8 | | - * Date: 2016.05.29 |
| 8 | + * Date: 2016.06.05 |
9 | 9 | * |
10 | 10 | */ |
11 | 11 |
|
|
25 | 25 |
|
26 | 26 | var pluginName = 'styler', |
27 | 27 | defaults = { |
28 | | - wrapper: 'form', |
29 | 28 | idSuffix: '-styler', |
30 | 29 | filePlaceholder: 'Файл не выбран', |
31 | 30 | fileBrowse: 'Обзор...', |
|
61 | 60 | var Android = (navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false; |
62 | 61 |
|
63 | 62 | function Attributes() { |
64 | | - var id = '', |
65 | | - title = '', |
66 | | - classes = '', |
67 | | - dataList = ''; |
68 | | - if (el.attr('id') !== undefined && el.attr('id') !== '') id = ' id="' + el.attr('id') + opt.idSuffix + '"'; |
69 | | - if (el.attr('title') !== undefined && el.attr('title') !== '') title = ' title="' + el.attr('title') + '"'; |
70 | | - if (el.attr('class') !== undefined && el.attr('class') !== '') classes = ' ' + el.attr('class'); |
71 | | - var data = el.data(); |
72 | | - for (var i in data) { |
73 | | - if (data[i] !== '' && i !== '_styler') dataList += ' data-' + i + '="' + data[i] + '"'; |
| 63 | + if (el.attr('id') !== undefined && el.attr('id') !== '') { |
| 64 | + this.id = el.attr('id') + opt.idSuffix; |
74 | 65 | } |
75 | | - id += dataList; |
76 | | - this.id = id; |
77 | | - this.title = title; |
78 | | - this.classes = classes; |
| 66 | + this.title = el.attr('title'); |
| 67 | + this.classes = el.attr('class'); |
| 68 | + this.data = el.data(); |
79 | 69 | } |
80 | 70 |
|
81 | 71 | // checkbox |
|
84 | 74 | var checkboxOutput = function() { |
85 | 75 |
|
86 | 76 | var att = new Attributes(); |
87 | | - var checkbox = $('<div' + att.id + ' class="jq-checkbox' + att.classes + '"' + att.title + '><div class="jq-checkbox__div"></div></div>'); |
| 77 | + var checkbox = $('<div class="jq-checkbox"><div class="jq-checkbox__div"></div></div>') |
| 78 | + .attr({ |
| 79 | + id: att.id, |
| 80 | + title: att.title |
| 81 | + }) |
| 82 | + .addClass(att.classes) |
| 83 | + .data(att.data) |
| 84 | + ; |
88 | 85 |
|
89 | 86 | // прячем оригинальный чекбокс |
90 | 87 | el.css({ |
|
165 | 162 | var radioOutput = function() { |
166 | 163 |
|
167 | 164 | var att = new Attributes(); |
168 | | - var radio = $('<div' + att.id + ' class="jq-radio' + att.classes + '"' + att.title + '><div class="jq-radio__div"></div></div>'); |
| 165 | + var radio = $('<div class="jq-radio"><div class="jq-radio__div"></div></div>') |
| 166 | + .attr({ |
| 167 | + id: att.id, |
| 168 | + title: att.title |
| 169 | + }) |
| 170 | + .addClass(att.classes) |
| 171 | + .data(att.data) |
| 172 | + ; |
169 | 173 |
|
170 | 174 | // прячем оригинальную радиокнопку |
171 | 175 | el.css({ |
|
189 | 193 | if (el.is(':checked')) radio.addClass('checked'); |
190 | 194 | if (el.is(':disabled')) radio.addClass('disabled'); |
191 | 195 |
|
| 196 | + // определяем общего родителя у радиокнопок с одинаковым name |
| 197 | + // http://stackoverflow.com/a/27733847 |
| 198 | + $.fn.commonParents = function (){ |
| 199 | + var cachedThis = this; |
| 200 | + return cachedThis.first().parents().filter(function () { |
| 201 | + return $(this).find(cachedThis).length === cachedThis.length; |
| 202 | + }); |
| 203 | + }; |
| 204 | + $.fn.commonParent = function (){ |
| 205 | + return $(this).commonParents().first(); |
| 206 | + }; |
| 207 | + |
192 | 208 | // клик на псевдорадиокнопке |
193 | 209 | radio.click(function(e) { |
194 | 210 | e.preventDefault(); |
195 | 211 | if (!radio.is('.disabled')) { |
196 | | - radio.closest(opt.wrapper).find('input[name="' + el.attr('name') + '"]').prop('checked', false).parent().removeClass('checked'); |
| 212 | + var inputName = $('input[name="' + el.attr('name') + '"]'); |
| 213 | + inputName.commonParent().find(inputName).prop('checked', false).parent().removeClass('checked'); |
197 | 214 | el.prop('checked', true).parent().addClass('checked'); |
198 | 215 | el.focus().change(); |
199 | 216 | } |
|
237 | 254 | position: 'absolute', |
238 | 255 | top: 0, |
239 | 256 | right: 0, |
240 | | - width: '100%', |
241 | | - height: '100%', |
242 | | - opacity: 0, |
243 | 257 | margin: 0, |
244 | | - padding: 0 |
| 258 | + padding: 0, |
| 259 | + opacity: 0, |
| 260 | + fontSize: '100px' |
245 | 261 | }); |
246 | 262 |
|
247 | 263 | var fileOutput = function() { |
|
251 | 267 | if (placeholder === undefined) placeholder = opt.filePlaceholder; |
252 | 268 | var browse = el.data('browse'); |
253 | 269 | if (browse === undefined || browse === '') browse = opt.fileBrowse; |
254 | | - var file = $('<div' + att.id + ' class="jq-file' + att.classes + '"' + att.title + ' style="display: inline-block; position: relative; overflow: hidden"></div>'); |
255 | | - var name = $('<div class="jq-file__name">' + placeholder + '</div>').appendTo(file); |
256 | | - $('<div class="jq-file__browse">' + browse + '</div>').appendTo(file); |
257 | | - el.after(file).appendTo(file); |
258 | 270 |
|
| 271 | + var file = |
| 272 | + $('<div class="jq-file">' + |
| 273 | + '<div class="jq-file__name">' + placeholder + '</div>' + |
| 274 | + '<div class="jq-file__browse">' + browse + '</div>' + |
| 275 | + '</div>') |
| 276 | + .css({ |
| 277 | + display: 'inline-block', |
| 278 | + position: 'relative', |
| 279 | + overflow: 'hidden' |
| 280 | + }) |
| 281 | + .attr({ |
| 282 | + id: att.id, |
| 283 | + title: att.title |
| 284 | + }) |
| 285 | + .addClass(att.classes) |
| 286 | + .data(att.data) |
| 287 | + ; |
| 288 | + |
| 289 | + el.after(file).appendTo(file); |
259 | 290 | if (el.is(':disabled')) file.addClass('disabled'); |
260 | 291 |
|
261 | 292 | el.on('change.styler', function() { |
262 | 293 | var value = el.val(); |
| 294 | + var name = $('div.jq-file__name', file); |
263 | 295 | if (el.is('[multiple]')) { |
264 | 296 | value = ''; |
265 | 297 | var files = el[0].files.length; |
|
304 | 336 |
|
305 | 337 | var numberOutput = function() { |
306 | 338 |
|
307 | | - var number = $('<div class="jq-number"><div class="jq-number__spin minus"></div><div class="jq-number__spin plus"></div></div>'); |
308 | | - el.after(number).prependTo(number).wrap('<div class="jq-number__field"></div>'); |
| 339 | + var att = new Attributes(); |
| 340 | + var number = |
| 341 | + $('<div class="jq-number">' + |
| 342 | + '<div class="jq-number__spin minus"></div>' + |
| 343 | + '<div class="jq-number__spin plus"></div>' + |
| 344 | + '</div>') |
| 345 | + .attr({ |
| 346 | + id: att.id, |
| 347 | + title: att.title |
| 348 | + }) |
| 349 | + .addClass(att.classes) |
| 350 | + .data(att.data) |
| 351 | + ; |
309 | 352 |
|
| 353 | + el.after(number).prependTo(number).wrap('<div class="jq-number__field"></div>'); |
310 | 354 | if (el.is(':disabled')) number.addClass('disabled'); |
311 | 355 |
|
312 | 356 | var min, |
|
324 | 368 | var changeValue = function(spin) { |
325 | 369 | var value = el.val(), |
326 | 370 | newValue; |
| 371 | + |
327 | 372 | if (!$.isNumeric(value)) { |
328 | 373 | value = 0; |
329 | 374 | el.val('0'); |
330 | 375 | } |
| 376 | + |
331 | 377 | if (spin.is('.minus')) { |
332 | | - newValue = parseInt(value, 10) - step; |
333 | | - if (step > 0) newValue = Math.ceil(newValue / step) * step; |
| 378 | + newValue = Number(value) - step; |
334 | 379 | } else if (spin.is('.plus')) { |
335 | | - newValue = parseInt(value, 10) + step; |
336 | | - if (step > 0) newValue = Math.floor(newValue / step) * step; |
| 380 | + newValue = Number(value) + step; |
| 381 | + } |
| 382 | + |
| 383 | + // определяем количество десятичных знаков после запятой в step |
| 384 | + var decimals = (step.toString().split('.')[1] || []).length; |
| 385 | + if (decimals > 0) { |
| 386 | + var multiplier = '1'; |
| 387 | + while (multiplier.length <= decimals) multiplier = multiplier + '0'; |
| 388 | + // избегаем появления лишних знаков после запятой |
| 389 | + newValue = Math.round(newValue * multiplier) / multiplier; |
337 | 390 | } |
| 391 | + |
338 | 392 | if ($.isNumeric(min) && $.isNumeric(max)) { |
339 | 393 | if (newValue >= min && newValue <= max) el.val(newValue); |
340 | 394 | } else if ($.isNumeric(min) && !$.isNumeric(max)) { |
|
448 | 502 |
|
449 | 503 | // одиночный селект |
450 | 504 | function doSelect() { |
451 | | - var att = new Attributes(); |
452 | 505 |
|
| 506 | + var att = new Attributes(); |
453 | 507 | var searchHTML = ''; |
454 | 508 | var selectPlaceholder = el.data('placeholder'); |
455 | 509 | var selectSearch = el.data('search'); |
|
468 | 522 | if (selectSmartPositioning === undefined || selectSmartPositioning === '') selectSmartPositioning = opt.selectSmartPositioning; |
469 | 523 |
|
470 | 524 | var selectbox = |
471 | | - $('<div' + att.id + ' class="jq-selectbox jqselect' + att.classes + '" style="display: inline-block; position: relative; z-index:' + singleSelectzIndex + '">' + |
472 | | - '<div class="jq-selectbox__select"' + att.title + ' style="position: relative">' + |
| 525 | + $('<div class="jq-selectbox jqselect">' + |
| 526 | + '<div class="jq-selectbox__select" style="position: relative">' + |
473 | 527 | '<div class="jq-selectbox__select-text"></div>' + |
474 | | - '<div class="jq-selectbox__trigger"><div class="jq-selectbox__trigger-arrow"></div></div>' + |
| 528 | + '<div class="jq-selectbox__trigger">' + |
| 529 | + '<div class="jq-selectbox__trigger-arrow"></div></div>' + |
475 | 530 | '</div>' + |
476 | | - '</div>'); |
| 531 | + '</div>') |
| 532 | + .css({ |
| 533 | + display: 'inline-block', |
| 534 | + position: 'relative', |
| 535 | + zIndex: singleSelectzIndex |
| 536 | + }) |
| 537 | + .attr({ |
| 538 | + id: att.id, |
| 539 | + title: att.title |
| 540 | + }) |
| 541 | + .addClass(att.classes) |
| 542 | + .data(att.data) |
| 543 | + ; |
477 | 544 |
|
478 | 545 | el.css({margin: 0, padding: 0}).after(selectbox).prependTo(selectbox); |
479 | 546 |
|
|
499 | 566 | if (li.length < selectSearchLimit) search.parent().hide(); |
500 | 567 |
|
501 | 568 | // показываем опцию по умолчанию |
502 | | - // если 1-я опция пустая и выбрана по умолчанию, то показываем плейсхолдер |
503 | | - if (el.val() === '') { |
| 569 | + // если у 1-й опции нет текста и она выбрана по умолчанию, то показываем плейсхолдер |
| 570 | + if (option.first().text() === '' && option.first().is(':selected')) { |
504 | 571 | divText.text(selectPlaceholder).addClass('placeholder'); |
505 | 572 | } else { |
506 | 573 | divText.text(optionSelected.text()); |
|
509 | 576 | // определяем самый широкий пункт селекта |
510 | 577 | var liWidthInner = 0, |
511 | 578 | liWidth = 0; |
| 579 | + li.css({'display': 'inline-block'}); |
512 | 580 | li.each(function() { |
513 | 581 | var l = $(this); |
514 | | - l.css({'display': 'inline-block'}); |
515 | 582 | if (l.innerWidth() > liWidthInner) { |
516 | 583 | liWidthInner = l.innerWidth(); |
517 | 584 | liWidth = l.width(); |
518 | 585 | } |
519 | | - l.css({'display': ''}); |
520 | 586 | }); |
| 587 | + li.css({'display': ''}); |
521 | 588 |
|
522 | 589 | // подстраиваем ширину свернутого селекта в зависимости |
523 | 590 | // от ширины плейсхолдера или самого широкого пункта |
|
551 | 618 | opacity: 0 |
552 | 619 | }); |
553 | 620 |
|
554 | | - var selectHeight = selectbox.outerHeight(); |
555 | | - var searchHeight = search.outerHeight(); |
| 621 | + var selectHeight = selectbox.outerHeight(true); |
| 622 | + var searchHeight = search.parent().outerHeight(true); |
556 | 623 | var isMaxHeight = ul.css('max-height'); |
557 | 624 | var liSelected = li.filter('.selected'); |
558 | 625 | if (liSelected.length < 1) li.first().addClass('selected sel'); |
|
822 | 889 |
|
823 | 890 | // мультиселект |
824 | 891 | function doMultipleSelect() { |
| 892 | + |
825 | 893 | var att = new Attributes(); |
826 | | - var selectbox = $('<div' + att.id + ' class="jq-select-multiple jqselect' + att.classes + '"' + att.title + ' style="display: inline-block; position: relative"></div>'); |
| 894 | + var selectbox = |
| 895 | + $('<div class="jq-select-multiple jqselect"></div>') |
| 896 | + .css({ |
| 897 | + display: 'inline-block', |
| 898 | + position: 'relative' |
| 899 | + }) |
| 900 | + .attr({ |
| 901 | + id: att.id, |
| 902 | + title: att.title |
| 903 | + }) |
| 904 | + .addClass(att.classes) |
| 905 | + .data(att.data) |
| 906 | + ; |
827 | 907 |
|
828 | 908 | el.css({margin: 0, padding: 0}).after(selectbox); |
829 | 909 |
|
|
991 | 1071 | } else if (el.is(':reset')) { |
992 | 1072 | el.on('click', function() { |
993 | 1073 | setTimeout(function() { |
994 | | - el.closest(opt.wrapper).find('input, select').trigger('refresh'); |
| 1074 | + el.closest('form').find('input, select').trigger('refresh'); |
995 | 1075 | }, 1); |
996 | 1076 | }); |
997 | 1077 | } // end reset |
|
0 commit comments