Skip to content
This repository was archived by the owner on Dec 27, 2021. It is now read-only.

Commit c98a977

Browse files
DimoxDimox
committed
1.6
1 parent 82569fc commit c98a977

File tree

5 files changed

+88
-58
lines changed

5 files changed

+88
-58
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# История изменений
22

3+
## 1.6 <sup>04.10.2014</sup>
4+
- Добавлено: возможность указать опции плагина конкретным тегам через data-атрибуты.
5+
- Добавлены новые классы: при открытии выпадающего селекта вверх (`.dropup`) и вниз (`.dropdown`).
6+
- Исправлено: не всегда корректно рассчитывалась ширина стилизованного селекта.
7+
- Исправлено: не передавались data-атрибуты от оригинальных элементов.
8+
39
## 1.5.6 <sup>08.09.2014</sup>
410
- Добавлено: выпадающий список селекта теперь можно открывать/закрывать пробелом.
511
- Изменено: отключена стилизация мультиселекта в Android (в стилизованном селекте нет возможности выбрать несколько пунктов) и iOS (в стилизованном селекте неправильно отображаются выбранные пункты).

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# jQuery Form Styler <sup>[1.5.6](https://github.com/Dimox/jQueryFormStyler/blob/master/CHANGELOG.md)</sup>
1+
# jQuery Form Styler <sup>[1.6](https://github.com/Dimox/jQueryFormStyler/blob/master/CHANGELOG.md)</sup>
22

33
jQuery-плагин для стилизации элементов html-форм:
44

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Dimox/jQueryFormStyler",
3-
"version": "1.5.6",
3+
"version": "1.6",
44
"main": "jquery.formstyler.css",
55
"description": "jQuery-плагин для стилизации элементов html-форм",
66
"license": "MIT",

‎jquery.formstyler.js

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*
2-
* jQuery Form Styler v1.5.6
2+
* jQuery Form Styler v1.6
33
* https://github.com/Dimox/jQueryFormStyler
44
*
55
* Copyright 2012-2014 Dimox (http://dimox.name/)
66
* Released under the MIT license.
77
*
8-
* Date: 2014.09.08
8+
* Date: 2014.10.04
99
*
1010
*/
1111

@@ -43,7 +43,7 @@
4343
if (el.attr('title') !== undefined && el.attr('title') !== '') title = ' title="' + el.attr('title') + '"';
4444
if (el.attr('class') !== undefined && el.attr('class') !== '') classes = ' ' + el.attr('class');
4545
var data = el.data();
46-
for (var i = 0; i < data.length; i++) {
46+
for (var i in data) {
4747
if (data[i] !== '') dataList += ' data-' + i + '="' + data[i] + '"';
4848
}
4949
id += dataList;
@@ -227,9 +227,13 @@
227227
var fileOutput = function() {
228228

229229
var att = new Attributes();
230+
var placeholder = el.data('placeholder');
231+
if (placeholder === undefined) placeholder = opt.filePlaceholder;
232+
var browse = el.data('browse');
233+
if (browse === undefined || browse === '') browse = opt.fileBrowse;
230234
var file = $('<div' + att.id + ' class="jq-file' + att.classes + '"' + att.title + ' style="display: inline-block; position: relative; overflow: hidden"></div>');
231-
var name = $('<div class="jq-file__name">' + opt.filePlaceholder + '</div>').appendTo(file);
232-
var browse = $('<div class="jq-file__browse">' + opt.fileBrowse + '</div>').appendTo(file);
235+
var name = $('<div class="jq-file__name">' + placeholder + '</div>').appendTo(file);
236+
$('<div class="jq-file__browse">' + browse + '</div>').appendTo(file);
233237
el.after(file);
234238
file.append(el);
235239
if (el.is(':disabled')) file.addClass('disabled');
@@ -244,7 +248,7 @@
244248
}
245249
name.text(value.replace(/.+[\\\/]/, ''));
246250
if (value === '') {
247-
name.text(opt.filePlaceholder);
251+
name.text(placeholder);
248252
file.removeClass('changed');
249253
} else {
250254
file.addClass('changed');
@@ -339,8 +343,26 @@
339343
// одиночный селект
340344
function doSelect() {
341345
var att = new Attributes();
346+
347+
var searchHTML = '';
348+
var selectPlaceholder = el.data('placeholder');
349+
var selectSearch = el.data('search');
350+
var selectSearchLimit = el.data('search-limit');
351+
var selectSearchNotFound = el.data('search-not-found');
352+
var selectSearchPlaceholder = el.data('search-placeholder');
353+
var singleSelectzIndex = el.data('z-index');
354+
var selectSmartPositioning = el.data('smart-positioning');
355+
356+
if (selectPlaceholder === undefined) selectPlaceholder = opt.selectPlaceholder;
357+
if (selectSearch === undefined || selectSearch === '') selectSearch = opt.selectSearch;
358+
if (selectSearchLimit === undefined || selectSearchLimit === '') selectSearchLimit = opt.selectSearchLimit;
359+
if (selectSearchNotFound === undefined || selectSearchNotFound === '') selectSearchNotFound = opt.selectSearchNotFound;
360+
if (selectSearchPlaceholder === undefined) selectSearchPlaceholder = opt.selectSearchPlaceholder;
361+
if (singleSelectzIndex === undefined || singleSelectzIndex === '') singleSelectzIndex = opt.singleSelectzIndex;
362+
if (selectSmartPositioning === undefined || selectSmartPositioning === '') selectSmartPositioning = opt.selectSmartPositioning;
363+
342364
var selectbox =
343-
$('<div' + att.id + ' class="jq-selectbox jqselect' + att.classes + '" style="display: inline-block; position: relative; z-index:' + opt.singleSelectzIndex + '">' +
365+
$('<div' + att.id + ' class="jq-selectbox jqselect' + att.classes + '" style="display: inline-block; position: relative; z-index:' + singleSelectzIndex + '">' +
344366
'<div class="jq-selectbox__select"' + att.title + ' style="position: relative">' +
345367
'<div class="jq-selectbox__select-text"></div>' +
346368
'<div class="jq-selectbox__trigger"><div class="jq-selectbox__trigger-arrow"></div></div>' +
@@ -354,10 +376,10 @@
354376
var optionSelected = option.filter(':selected');
355377

356378
makeList();
357-
var searchHTML = '';
358-
if (opt.selectSearch) searchHTML =
359-
'<div class="jq-selectbox__search"><input type="search" autocomplete="off" placeholder="' + opt.selectSearchPlaceholder + '"></div>' +
360-
'<div class="jq-selectbox__not-found">' + opt.selectSearchNotFound + '</div>';
379+
380+
if (selectSearch) searchHTML =
381+
'<div class="jq-selectbox__search"><input type="search" autocomplete="off" placeholder="' + selectSearchPlaceholder + '"></div>' +
382+
'<div class="jq-selectbox__not-found">' + selectSearchNotFound + '</div>';
361383
var dropdown =
362384
$('<div class="jq-selectbox__dropdown" style="position: absolute">' +
363385
searchHTML +
@@ -368,7 +390,7 @@
368390
var li = $('li', dropdown);
369391
var search = $('input', dropdown);
370392
var notFound = $('div.jq-selectbox__not-found', dropdown).hide();
371-
if (li.length < opt.selectSearchLimit) search.parent().hide();
393+
if (li.length < selectSearchLimit) search.parent().hide();
372394

373395
// определяем самый широкий пункт селекта
374396
var liWidth1 = 0,
@@ -390,7 +412,6 @@
390412
selClone.remove();
391413
if (selCloneWidth == selectbox.width()) {
392414
divText.width(liWidth2);
393-
liWidth1 += selectbox.find('div.jq-selectbox__trigger').width();
394415
}
395416
if ( liWidth1 > selectbox.width() ) {
396417
dropdown.width(liWidth1);
@@ -399,9 +420,7 @@
399420
// показываем опцию по умолчанию
400421
// если 1-я опция пустая и выбрана по умолчанию, то показываем плейсхолдер
401422
if (el.val() === '') {
402-
var placeholder = el.data('placeholder');
403-
if (placeholder === undefined) placeholder = opt.selectPlaceholder;
404-
divText.text(placeholder).addClass('placeholder');
423+
divText.text(selectPlaceholder).addClass('placeholder');
405424
} else {
406425
divText.text(optionSelected.text());
407426
}
@@ -469,7 +488,8 @@
469488
var liHeight = li.data('li-height');
470489
var topOffset = selectbox.offset().top;
471490
var bottomOffset = win.height() - selectHeight - (topOffset - win.scrollTop());
472-
var visible = opt.selectVisibleOptions;
491+
var visible = el.data('visible-options');
492+
if (visible === undefined || visible === '') visible = opt.selectVisibleOptions;
473493
var minHeight = liHeight * 5;
474494
var newHeight = liHeight * visible;
475495
if (visible > 0 && visible < 6) minHeight = newHeight;
@@ -505,24 +525,27 @@
505525
}
506526
};
507527

508-
if (opt.selectSmartPositioning === true) {
528+
if (selectSmartPositioning === true || selectSmartPositioning === 1) {
509529
// раскрытие вниз
510530
if (bottomOffset > (minHeight + searchHeight + 20)) {
511531
dropDown();
532+
selectbox.removeClass('dropup').addClass('dropdown');
512533
// раскрытие вверх
513534
} else {
514535
dropUp();
536+
selectbox.removeClass('dropdown').addClass('dropup');
515537
}
516-
} else if (opt.selectSmartPositioning === false) {
538+
} else if (selectSmartPositioning === false || selectSmartPositioning === 0) {
517539
// раскрытие вниз
518540
if (bottomOffset > (minHeight + searchHeight + 20)) {
519541
dropDown();
542+
selectbox.removeClass('dropup').addClass('dropdown');
520543
}
521544
}
522545
// конец умного позиционирования
523546

524-
$('div.jqselect').css({zIndex: (opt.singleSelectzIndex - 1)}).removeClass('opened');
525-
selectbox.css({zIndex: opt.singleSelectzIndex});
547+
$('div.jqselect').css({zIndex: (singleSelectzIndex - 1)}).removeClass('opened');
548+
selectbox.css({zIndex: singleSelectzIndex});
526549
if (dropdown.is(':hidden')) {
527550
$('div.jq-selectbox__dropdown:visible').hide();
528551
dropdown.show();
@@ -531,7 +554,7 @@
531554
opt.onSelectOpened.call(selectbox);
532555
} else {
533556
dropdown.hide();
534-
selectbox.removeClass('opened');
557+
selectbox.removeClass('opened dropup dropdown');
535558
// колбек при закрытии селекта
536559
if ($('div.jq-selectbox').filter('.opened').length) {
537560
opt.onSelectClosed.call(selectbox);
@@ -604,7 +627,7 @@
604627
el.change();
605628
}
606629
dropdown.hide();
607-
selectbox.removeClass('opened');
630+
selectbox.removeClass('opened dropup dropdown');
608631
// колбек при закрытии селекта
609632
opt.onSelectClosed.call(selectbox);
610633

@@ -626,7 +649,7 @@
626649
})
627650
.on('focus.styler', function() {
628651
selectbox.addClass('focused');
629-
$('div.jqselect').not('.focused').removeClass('opened').find('div.jq-selectbox__dropdown').hide();
652+
$('div.jqselect').not('.focused').removeClass('opened dropup dropdown').find('div.jq-selectbox__dropdown').hide();
630653
})
631654
.on('blur.styler', function() {
632655
selectbox.removeClass('focused');
@@ -648,7 +671,7 @@
648671
if (e.which == 13) {
649672
e.preventDefault();
650673
dropdown.hide();
651-
selectbox.removeClass('opened');
674+
selectbox.removeClass('opened dropup dropdown');
652675
// колбек при закрытии селекта
653676
opt.onSelectClosed.call(selectbox);
654677
}
@@ -673,7 +696,7 @@
673696

674697
if (search.length) search.val('').keyup();
675698
dropdown.hide().find('li.sel').addClass('selected');
676-
selectbox.removeClass('focused opened');
699+
selectbox.removeClass('focused opened dropup dropdown');
677700

678701
}
679702
});

0 commit comments

Comments
 (0)