2295 lines
41 KiB
JavaScript
2295 lines
41 KiB
JavaScript
/*
|
||
|
||
* jQuery Form Styler v1.7.6
|
||
|
||
* https://github.com/Dimox/jQueryFormStyler
|
||
|
||
*
|
||
|
||
* Copyright 2012-2016 Dimox (http://dimox.name/)
|
||
|
||
* Released under the MIT license.
|
||
|
||
*
|
||
|
||
* Date: 2016.06.05
|
||
|
||
*
|
||
|
||
*/
|
||
|
||
|
||
|
||
;(function(factory) {
|
||
|
||
if (typeof define === 'function' && define.amd) {
|
||
|
||
// AMD
|
||
|
||
define(['jquery'], factory);
|
||
|
||
} else if (typeof exports === 'object') {
|
||
|
||
// CommonJS
|
||
|
||
module.exports = factory(require('jquery'));
|
||
|
||
} else {
|
||
|
||
factory(jQuery);
|
||
|
||
}
|
||
|
||
}(function($) {
|
||
|
||
|
||
|
||
'use strict';
|
||
|
||
|
||
|
||
var pluginName = 'styler',
|
||
|
||
defaults = {
|
||
|
||
idSuffix: '-styler',
|
||
|
||
filePlaceholder: 'Файл не выбран',
|
||
|
||
fileBrowse: 'Обзор...',
|
||
|
||
fileNumber: 'Выбрано файлов: %s',
|
||
|
||
selectPlaceholder: 'Выберите...',
|
||
|
||
selectSearch: false,
|
||
|
||
selectSearchLimit: 10,
|
||
|
||
selectSearchNotFound: 'Совпадений не найдено',
|
||
|
||
selectSearchPlaceholder: 'Поиск...',
|
||
|
||
selectVisibleOptions: 0,
|
||
|
||
singleSelectzIndex: '100',
|
||
|
||
selectSmartPositioning: true,
|
||
|
||
onSelectOpened: function() {},
|
||
|
||
onSelectClosed: function() {},
|
||
|
||
onFormStyled: function() {}
|
||
|
||
};
|
||
|
||
|
||
|
||
function Plugin(element, options) {
|
||
|
||
this.element = element;
|
||
|
||
this.options = $.extend({}, defaults, options);
|
||
|
||
this.init();
|
||
|
||
}
|
||
|
||
|
||
|
||
Plugin.prototype = {
|
||
|
||
|
||
|
||
// инициализация
|
||
|
||
init: function() {
|
||
|
||
|
||
|
||
var el = $(this.element);
|
||
|
||
var opt = this.options;
|
||
|
||
|
||
|
||
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false;
|
||
|
||
var Android = (navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false;
|
||
|
||
|
||
|
||
function Attributes() {
|
||
|
||
if (el.attr('id') !== undefined && el.attr('id') !== '') {
|
||
|
||
this.id = el.attr('id') + opt.idSuffix;
|
||
|
||
}
|
||
|
||
this.title = el.attr('title');
|
||
|
||
this.classes = el.attr('class');
|
||
|
||
this.data = el.data();
|
||
|
||
}
|
||
|
||
|
||
|
||
// checkbox
|
||
|
||
if (el.is(':checkbox')) {
|
||
|
||
|
||
|
||
var checkboxOutput = function() {
|
||
|
||
|
||
|
||
var att = new Attributes();
|
||
|
||
var checkbox = $('<div class="jq-checkbox"><div class="jq-checkbox__div"></div></div>')
|
||
|
||
.attr({
|
||
|
||
id: att.id,
|
||
|
||
title: att.title
|
||
|
||
})
|
||
|
||
.addClass(att.classes)
|
||
|
||
.data(att.data)
|
||
|
||
;
|
||
|
||
|
||
|
||
// прячем оригинальный чекбокс
|
||
|
||
el.css({
|
||
|
||
position: 'absolute',
|
||
|
||
zIndex: '-1',
|
||
|
||
opacity: 0,
|
||
|
||
margin: 0,
|
||
|
||
padding: 0
|
||
|
||
}).after(checkbox).prependTo(checkbox);
|
||
|
||
|
||
|
||
checkbox.attr('unselectable', 'on').css({
|
||
|
||
'-webkit-user-select': 'none',
|
||
|
||
'-moz-user-select': 'none',
|
||
|
||
'-ms-user-select': 'none',
|
||
|
||
'-o-user-select': 'none',
|
||
|
||
'user-select': 'none',
|
||
|
||
display: 'inline-block',
|
||
|
||
position: 'relative',
|
||
|
||
overflow: 'hidden'
|
||
|
||
});
|
||
|
||
|
||
|
||
if (el.is(':checked')) checkbox.addClass('checked');
|
||
|
||
if (el.is(':disabled')) checkbox.addClass('disabled');
|
||
|
||
|
||
|
||
// клик на псевдочекбокс
|
||
|
||
checkbox.click(function(e) {
|
||
|
||
e.preventDefault();
|
||
|
||
if (!checkbox.is('.disabled')) {
|
||
|
||
if (el.is(':checked')) {
|
||
|
||
el.prop('checked', false);
|
||
|
||
checkbox.removeClass('checked');
|
||
|
||
} else {
|
||
|
||
el.prop('checked', true);
|
||
|
||
checkbox.addClass('checked');
|
||
|
||
}
|
||
|
||
el.focus().change();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
// клик на label
|
||
|
||
el.closest('label').add('label[for="' + el.attr('id') + '"]').on('click.styler', function(e) {
|
||
|
||
if (!$(e.target).is('a') && !$(e.target).closest(checkbox).length) {
|
||
|
||
checkbox.triggerHandler('click');
|
||
|
||
e.preventDefault();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
// переключение по Space или Enter
|
||
|
||
el.on('change.styler', function() {
|
||
|
||
if (el.is(':checked')) checkbox.addClass('checked');
|
||
|
||
else checkbox.removeClass('checked');
|
||
|
||
})
|
||
|
||
// чтобы переключался чекбокс, который находится в теге label
|
||
|
||
.on('keydown.styler', function(e) {
|
||
|
||
if (e.which == 32) checkbox.click();
|
||
|
||
})
|
||
|
||
.on('focus.styler', function() {
|
||
|
||
if (!checkbox.is('.disabled')) checkbox.addClass('focused');
|
||
|
||
})
|
||
|
||
.on('blur.styler', function() {
|
||
|
||
checkbox.removeClass('focused');
|
||
|
||
});
|
||
|
||
|
||
|
||
}; // end checkboxOutput()
|
||
|
||
|
||
|
||
checkboxOutput();
|
||
|
||
|
||
|
||
// обновление при динамическом изменении
|
||
|
||
el.on('refresh', function() {
|
||
|
||
el.closest('label').add('label[for="' + el.attr('id') + '"]').off('.styler');
|
||
|
||
el.off('.styler').parent().before(el).remove();
|
||
|
||
checkboxOutput();
|
||
|
||
});
|
||
|
||
|
||
|
||
// end checkbox
|
||
|
||
|
||
|
||
// radio
|
||
|
||
} else if (el.is(':radio')) {
|
||
|
||
|
||
|
||
var radioOutput = function() {
|
||
|
||
|
||
|
||
var att = new Attributes();
|
||
|
||
var radio = $('<div class="jq-radio"><div class="jq-radio__div"></div></div>')
|
||
|
||
.attr({
|
||
|
||
id: att.id,
|
||
|
||
title: att.title
|
||
|
||
})
|
||
|
||
.addClass(att.classes)
|
||
|
||
.data(att.data)
|
||
|
||
;
|
||
|
||
|
||
|
||
// прячем оригинальную радиокнопку
|
||
|
||
el.css({
|
||
|
||
position: 'absolute',
|
||
|
||
zIndex: '-1',
|
||
|
||
opacity: 0,
|
||
|
||
margin: 0,
|
||
|
||
padding: 0
|
||
|
||
}).after(radio).prependTo(radio);
|
||
|
||
|
||
|
||
radio.attr('unselectable', 'on').css({
|
||
|
||
'-webkit-user-select': 'none',
|
||
|
||
'-moz-user-select': 'none',
|
||
|
||
'-ms-user-select': 'none',
|
||
|
||
'-o-user-select': 'none',
|
||
|
||
'user-select': 'none',
|
||
|
||
display: 'inline-block',
|
||
|
||
position: 'relative'
|
||
|
||
});
|
||
|
||
|
||
|
||
if (el.is(':checked')) radio.addClass('checked');
|
||
|
||
if (el.is(':disabled')) radio.addClass('disabled');
|
||
|
||
|
||
|
||
// определяем общего родителя у радиокнопок с одинаковым name
|
||
|
||
// http://stackoverflow.com/a/27733847
|
||
|
||
$.fn.commonParents = function (){
|
||
|
||
var cachedThis = this;
|
||
|
||
return cachedThis.first().parents().filter(function () {
|
||
|
||
return $(this).find(cachedThis).length === cachedThis.length;
|
||
|
||
});
|
||
|
||
};
|
||
|
||
$.fn.commonParent = function (){
|
||
|
||
return $(this).commonParents().first();
|
||
|
||
};
|
||
|
||
|
||
|
||
// клик на псевдорадиокнопке
|
||
|
||
radio.click(function(e) {
|
||
|
||
e.preventDefault();
|
||
|
||
if (!radio.is('.disabled')) {
|
||
|
||
var inputName = $('input[name="' + el.attr('name') + '"]');
|
||
|
||
inputName.commonParent().find(inputName).prop('checked', false).parent().removeClass('checked');
|
||
|
||
el.prop('checked', true).parent().addClass('checked');
|
||
|
||
el.focus().change();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
// клик на label
|
||
|
||
el.closest('label').add('label[for="' + el.attr('id') + '"]').on('click.styler', function(e) {
|
||
|
||
if (!$(e.target).is('a') && !$(e.target).closest(radio).length) {
|
||
|
||
radio.triggerHandler('click');
|
||
|
||
e.preventDefault();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
// переключение стрелками
|
||
|
||
el.on('change.styler', function() {
|
||
|
||
el.parent().addClass('checked');
|
||
|
||
})
|
||
|
||
.on('focus.styler', function() {
|
||
|
||
if (!radio.is('.disabled')) radio.addClass('focused');
|
||
|
||
})
|
||
|
||
.on('blur.styler', function() {
|
||
|
||
radio.removeClass('focused');
|
||
|
||
});
|
||
|
||
|
||
|
||
}; // end radioOutput()
|
||
|
||
|
||
|
||
radioOutput();
|
||
|
||
|
||
|
||
// обновление при динамическом изменении
|
||
|
||
el.on('refresh', function() {
|
||
|
||
el.closest('label').add('label[for="' + el.attr('id') + '"]').off('.styler');
|
||
|
||
el.off('.styler').parent().before(el).remove();
|
||
|
||
radioOutput();
|
||
|
||
});
|
||
|
||
|
||
|
||
// end radio
|
||
|
||
|
||
|
||
// file
|
||
|
||
} else if (el.is(':file')) {
|
||
|
||
|
||
|
||
// прячем оригинальное поле
|
||
|
||
el.css({
|
||
|
||
position: 'absolute',
|
||
|
||
top: 0,
|
||
|
||
right: 0,
|
||
|
||
margin: 0,
|
||
|
||
padding: 0,
|
||
|
||
opacity: 0,
|
||
|
||
fontSize: '100px'
|
||
|
||
});
|
||
|
||
|
||
|
||
var fileOutput = function() {
|
||
|
||
|
||
|
||
var att = new Attributes();
|
||
|
||
var placeholder = el.data('placeholder');
|
||
|
||
if (placeholder === undefined) placeholder = opt.filePlaceholder;
|
||
|
||
var browse = el.data('browse');
|
||
|
||
if (browse === undefined || browse === '') browse = opt.fileBrowse;
|
||
|
||
|
||
|
||
var file =
|
||
|
||
$('<div class="jq-file">' +
|
||
|
||
'<div class="jq-file__name">' + placeholder + '</div>' +
|
||
|
||
'<div class="jq-file__browse">' + browse + '</div>' +
|
||
|
||
'</div>')
|
||
|
||
.css({
|
||
|
||
display: 'inline-block',
|
||
|
||
position: 'relative',
|
||
|
||
overflow: 'hidden'
|
||
|
||
})
|
||
|
||
.attr({
|
||
|
||
id: att.id,
|
||
|
||
title: att.title
|
||
|
||
})
|
||
|
||
.addClass(att.classes)
|
||
|
||
.data(att.data)
|
||
|
||
;
|
||
|
||
|
||
|
||
el.after(file).appendTo(file);
|
||
|
||
if (el.is(':disabled')) file.addClass('disabled');
|
||
|
||
|
||
|
||
el.on('change.styler', function() {
|
||
|
||
var value = el.val();
|
||
|
||
var name = $('div.jq-file__name', file);
|
||
|
||
if (el.is('[multiple]')) {
|
||
|
||
value = '';
|
||
|
||
var files = el[0].files.length;
|
||
|
||
if (files > 0) {
|
||
|
||
var number = el.data('number');
|
||
|
||
if (number === undefined) number = opt.fileNumber;
|
||
|
||
number = number.replace('%s', files);
|
||
|
||
value = number;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
name.text(value.replace(/.+[\\\/]/, ''));
|
||
|
||
if (value === '') {
|
||
|
||
name.text(placeholder);
|
||
|
||
file.removeClass('changed');
|
||
|
||
} else {
|
||
|
||
file.addClass('changed');
|
||
|
||
}
|
||
|
||
})
|
||
|
||
.on('focus.styler', function() {
|
||
|
||
file.addClass('focused');
|
||
|
||
})
|
||
|
||
.on('blur.styler', function() {
|
||
|
||
file.removeClass('focused');
|
||
|
||
})
|
||
|
||
.on('click.styler', function() {
|
||
|
||
file.removeClass('focused');
|
||
|
||
});
|
||
|
||
|
||
|
||
}; // end fileOutput()
|
||
|
||
|
||
|
||
fileOutput();
|
||
|
||
|
||
|
||
// обновление при динамическом изменении
|
||
|
||
el.on('refresh', function() {
|
||
|
||
el.off('.styler').parent().before(el).remove();
|
||
|
||
fileOutput();
|
||
|
||
});
|
||
|
||
|
||
|
||
// end file
|
||
|
||
|
||
|
||
} else if (el.is('input[type="number"]')) {
|
||
|
||
|
||
|
||
var numberOutput = function() {
|
||
|
||
|
||
|
||
var att = new Attributes();
|
||
|
||
var number =
|
||
|
||
$('<div class="jq-number">' +
|
||
|
||
'<div class="jq-number__spin minus ti-angle-down"></div>' +
|
||
|
||
'<div class="jq-number__spin plus ti-angle-up"></div>' +
|
||
|
||
'</div>')
|
||
|
||
.attr({
|
||
|
||
id: att.id,
|
||
|
||
title: att.title
|
||
|
||
})
|
||
|
||
.addClass(att.classes)
|
||
|
||
.data(att.data)
|
||
|
||
;
|
||
|
||
|
||
|
||
el.after(number).prependTo(number).wrap('<div class="jq-number__field"></div>');
|
||
|
||
if (el.is(':disabled')) number.addClass('disabled');
|
||
|
||
|
||
|
||
var min,
|
||
|
||
max,
|
||
|
||
step,
|
||
|
||
timeout = null,
|
||
|
||
interval = null;
|
||
|
||
if (el.attr('min') !== undefined) min = el.attr('min');
|
||
|
||
if (el.attr('max') !== undefined) max = el.attr('max');
|
||
|
||
if (el.attr('step') !== undefined && $.isNumeric(el.attr('step')))
|
||
|
||
step = Number(el.attr('step'));
|
||
|
||
else
|
||
|
||
step = Number(1);
|
||
|
||
|
||
|
||
var changeValue = function(spin) {
|
||
|
||
var value = el.val(),
|
||
|
||
newValue;
|
||
|
||
|
||
|
||
if (!$.isNumeric(value)) {
|
||
|
||
value = 0;
|
||
|
||
el.val('0');
|
||
|
||
}
|
||
|
||
|
||
|
||
if (spin.is('.minus')) {
|
||
|
||
newValue = Number(value) - step;
|
||
|
||
} else if (spin.is('.plus')) {
|
||
|
||
newValue = Number(value) + step;
|
||
|
||
}
|
||
|
||
|
||
|
||
// определяем количество десятичных знаков после запятой в step
|
||
|
||
var decimals = (step.toString().split('.')[1] || []).length;
|
||
|
||
if (decimals > 0) {
|
||
|
||
var multiplier = '1';
|
||
|
||
while (multiplier.length <= decimals) multiplier = multiplier + '0';
|
||
|
||
// избегаем появления лишних знаков после запятой
|
||
|
||
newValue = Math.round(newValue * multiplier) / multiplier;
|
||
|
||
}
|
||
|
||
|
||
|
||
if ($.isNumeric(min) && $.isNumeric(max)) {
|
||
|
||
if (newValue >= min && newValue <= max) el.val(newValue);
|
||
|
||
} else if ($.isNumeric(min) && !$.isNumeric(max)) {
|
||
|
||
if (newValue >= min) el.val(newValue);
|
||
|
||
} else if (!$.isNumeric(min) && $.isNumeric(max)) {
|
||
|
||
if (newValue <= max) el.val(newValue);
|
||
|
||
} else {
|
||
|
||
el.val(newValue);
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
if (!number.is('.disabled')) {
|
||
|
||
number.on('mousedown', 'div.jq-number__spin', function() {
|
||
|
||
var spin = $(this);
|
||
|
||
changeValue(spin);
|
||
|
||
timeout = setTimeout(function(){
|
||
|
||
interval = setInterval(function(){ changeValue(spin); }, 40);
|
||
|
||
}, 350);
|
||
|
||
}).on('mouseup mouseout', 'div.jq-number__spin', function() {
|
||
|
||
clearTimeout(timeout);
|
||
|
||
clearInterval(interval);
|
||
|
||
}).on('mouseup', 'div.jq-number__spin', function() {
|
||
|
||
el.change();
|
||
|
||
});
|
||
|
||
el.on('focus.styler', function() {
|
||
|
||
number.addClass('focused');
|
||
|
||
})
|
||
|
||
.on('blur.styler', function() {
|
||
|
||
number.removeClass('focused');
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
}; // end numberOutput()
|
||
|
||
|
||
|
||
numberOutput();
|
||
|
||
|
||
|
||
// обновление при динамическом изменении
|
||
|
||
el.on('refresh', function() {
|
||
|
||
el.off('.styler').closest('.jq-number').before(el).remove();
|
||
|
||
numberOutput();
|
||
|
||
});
|
||
|
||
|
||
|
||
// end number
|
||
|
||
|
||
|
||
// select
|
||
|
||
} else if (el.is('select')) {
|
||
|
||
|
||
|
||
var selectboxOutput = function() {
|
||
|
||
|
||
|
||
// запрещаем прокрутку страницы при прокрутке селекта
|
||
|
||
function preventScrolling(selector) {
|
||
|
||
selector.off('mousewheel DOMMouseScroll').on('mousewheel DOMMouseScroll', function(e) {
|
||
|
||
var scrollTo = null;
|
||
|
||
if (e.type == 'mousewheel') { scrollTo = (e.originalEvent.wheelDelta * -1); }
|
||
|
||
else if (e.type == 'DOMMouseScroll') { scrollTo = 40 * e.originalEvent.detail; }
|
||
|
||
if (scrollTo) {
|
||
|
||
e.stopPropagation();
|
||
|
||
e.preventDefault();
|
||
|
||
$(this).scrollTop(scrollTo + $(this).scrollTop());
|
||
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
var option = $('option', el);
|
||
|
||
var list = '';
|
||
|
||
// формируем список селекта
|
||
|
||
function makeList() {
|
||
|
||
for (var i = 0; i < option.length; i++) {
|
||
|
||
var op = option.eq(i);
|
||
|
||
var li = '',
|
||
|
||
liClass = '',
|
||
|
||
liClasses = '',
|
||
|
||
id = '',
|
||
|
||
title = '',
|
||
|
||
dataList = '',
|
||
|
||
optionClass = '',
|
||
|
||
optgroupClass = '',
|
||
|
||
dataJqfsClass = '';
|
||
|
||
var disabled = 'disabled';
|
||
|
||
var selDis = 'selected sel disabled';
|
||
|
||
if (op.prop('selected')) liClass = 'selected sel';
|
||
|
||
if (op.is(':disabled')) liClass = disabled;
|
||
|
||
if (op.is(':selected:disabled')) liClass = selDis;
|
||
|
||
if (op.attr('id') !== undefined && op.attr('id') !== '') id = ' id="' + op.attr('id') + opt.idSuffix + '"';
|
||
|
||
if (op.attr('title') !== undefined && option.attr('title') !== '') title = ' title="' + op.attr('title') + '"';
|
||
|
||
if (op.attr('class') !== undefined) {
|
||
|
||
optionClass = ' ' + op.attr('class');
|
||
|
||
dataJqfsClass = ' data-jqfs-class="' + op.attr('class') + '"';
|
||
|
||
}
|
||
|
||
|
||
|
||
var data = op.data();
|
||
|
||
for (var k in data) {
|
||
|
||
if (data[k] !== '') dataList += ' data-' + k + '="' + data[k] + '"';
|
||
|
||
}
|
||
|
||
|
||
|
||
if ( (liClass + optionClass) !== '' ) liClasses = ' class="' + liClass + optionClass + '"';
|
||
|
||
li = '<li' + dataJqfsClass + dataList + liClasses + title + id + '>'+ op.html() +'</li>';
|
||
|
||
|
||
|
||
// если есть optgroup
|
||
|
||
if (op.parent().is('optgroup')) {
|
||
|
||
if (op.parent().attr('class') !== undefined) optgroupClass = ' ' + op.parent().attr('class');
|
||
|
||
li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + ' option' + optgroupClass + '"' + title + id + '>'+ op.html() +'</li>';
|
||
|
||
if (op.is(':first-child')) {
|
||
|
||
li = '<li class="optgroup' + optgroupClass + '">' + op.parent().attr('label') + '</li>' + li;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
list += li;
|
||
|
||
}
|
||
|
||
} // end makeList()
|
||
|
||
|
||
|
||
// одиночный селект
|
||
|
||
function doSelect() {
|
||
|
||
|
||
|
||
var att = new Attributes();
|
||
|
||
var searchHTML = '';
|
||
|
||
var selectPlaceholder = el.data('placeholder');
|
||
|
||
var selectSearch = el.data('search');
|
||
|
||
var selectSearchLimit = el.data('search-limit');
|
||
|
||
var selectSearchNotFound = el.data('search-not-found');
|
||
|
||
var selectSearchPlaceholder = el.data('search-placeholder');
|
||
|
||
var singleSelectzIndex = el.data('z-index');
|
||
|
||
var selectSmartPositioning = el.data('smart-positioning');
|
||
|
||
|
||
|
||
if (selectPlaceholder === undefined) selectPlaceholder = opt.selectPlaceholder;
|
||
|
||
if (selectSearch === undefined || selectSearch === '') selectSearch = opt.selectSearch;
|
||
|
||
if (selectSearchLimit === undefined || selectSearchLimit === '') selectSearchLimit = opt.selectSearchLimit;
|
||
|
||
if (selectSearchNotFound === undefined || selectSearchNotFound === '') selectSearchNotFound = opt.selectSearchNotFound;
|
||
|
||
if (selectSearchPlaceholder === undefined) selectSearchPlaceholder = opt.selectSearchPlaceholder;
|
||
|
||
if (singleSelectzIndex === undefined || singleSelectzIndex === '') singleSelectzIndex = opt.singleSelectzIndex;
|
||
|
||
if (selectSmartPositioning === undefined || selectSmartPositioning === '') selectSmartPositioning = opt.selectSmartPositioning;
|
||
|
||
|
||
|
||
var selectbox =
|
||
|
||
$('<div class="jq-selectbox jqselect">' +
|
||
|
||
'<div class="jq-selectbox__select" style="position: relative">' +
|
||
|
||
'<div class="jq-selectbox__select-text"></div>' +
|
||
|
||
'<div class="jq-selectbox__trigger">' +
|
||
|
||
'<div class="jq-selectbox__trigger-arrow"><i class="ti-angle-down"></i></div></div>' +
|
||
|
||
'</div>' +
|
||
|
||
'</div>')
|
||
|
||
.css({
|
||
|
||
display: 'inline-block',
|
||
|
||
position: 'relative',
|
||
|
||
zIndex: singleSelectzIndex
|
||
|
||
})
|
||
|
||
.attr({
|
||
|
||
id: att.id,
|
||
|
||
title: att.title
|
||
|
||
})
|
||
|
||
.addClass(att.classes)
|
||
|
||
.data(att.data)
|
||
|
||
;
|
||
|
||
|
||
|
||
el.css({margin: 0, padding: 0}).after(selectbox).prependTo(selectbox);
|
||
|
||
|
||
|
||
var divSelect = $('div.jq-selectbox__select', selectbox);
|
||
|
||
var divText = $('div.jq-selectbox__select-text', selectbox);
|
||
|
||
var optionSelected = option.filter(':selected');
|
||
|
||
|
||
|
||
makeList();
|
||
|
||
|
||
|
||
if (selectSearch) searchHTML =
|
||
|
||
'<div class="jq-selectbox__search"><input type="search" autocomplete="off" placeholder="' + selectSearchPlaceholder + '"></div>' +
|
||
|
||
'<div class="jq-selectbox__not-found">' + selectSearchNotFound + '</div>';
|
||
|
||
var dropdown =
|
||
|
||
$('<div class="jq-selectbox__dropdown" style="position: absolute">' +
|
||
|
||
searchHTML +
|
||
|
||
'<ul style="position: relative; list-style: none; overflow: auto; overflow-x: hidden">' + list + '</ul>' +
|
||
|
||
'</div>');
|
||
|
||
selectbox.append(dropdown);
|
||
|
||
var ul = $('ul', dropdown);
|
||
|
||
var li = $('li', dropdown);
|
||
|
||
var search = $('input', dropdown);
|
||
|
||
var notFound = $('div.jq-selectbox__not-found', dropdown).hide();
|
||
|
||
if (li.length < selectSearchLimit) search.parent().hide();
|
||
|
||
|
||
|
||
// показываем опцию по умолчанию
|
||
|
||
// если у 1-й опции нет текста и она выбрана по умолчанию, то показываем плейсхолдер
|
||
|
||
if (option.first().text() === '' && option.first().is(':selected')) {
|
||
|
||
divText.text(selectPlaceholder).addClass('placeholder');
|
||
|
||
} else {
|
||
|
||
divText.text(optionSelected.text());
|
||
|
||
}
|
||
|
||
|
||
|
||
// определяем самый широкий пункт селекта
|
||
|
||
var liWidthInner = 0,
|
||
|
||
liWidth = 0;
|
||
|
||
li.css({'display': 'inline-block'});
|
||
|
||
li.each(function() {
|
||
|
||
var l = $(this);
|
||
|
||
if (l.innerWidth() > liWidthInner) {
|
||
|
||
liWidthInner = l.innerWidth();
|
||
|
||
liWidth = l.width();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
li.css({'display': ''});
|
||
|
||
|
||
|
||
// подстраиваем ширину свернутого селекта в зависимости
|
||
|
||
// от ширины плейсхолдера или самого широкого пункта
|
||
|
||
if (divText.is('.placeholder') && (divText.width() > liWidthInner)) {
|
||
|
||
divText.width(divText.width());
|
||
|
||
} else {
|
||
|
||
var selClone = selectbox.clone().appendTo('body').width('auto');
|
||
|
||
var selCloneWidth = selClone.outerWidth();
|
||
|
||
selClone.remove();
|
||
|
||
if (selCloneWidth == selectbox.outerWidth()) {
|
||
|
||
divText.width(liWidth);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
// подстраиваем ширину выпадающего списка в зависимости от самого широкого пункта
|
||
|
||
if (liWidthInner > selectbox.width()) dropdown.width(liWidthInner);
|
||
|
||
|
||
|
||
// прячем 1-ю пустую опцию, если она есть и если атрибут data-placeholder не пустой
|
||
|
||
// если все же нужно, чтобы первая пустая опция отображалась, то указываем у селекта: data-placeholder=""
|
||
|
||
if (option.first().text() === '' && el.data('placeholder') !== '') {
|
||
|
||
li.first().hide();
|
||
|
||
}
|
||
|
||
|
||
|
||
// прячем оригинальный селект
|
||
|
||
el.css({
|
||
|
||
position: 'absolute',
|
||
|
||
left: 0,
|
||
|
||
top: 0,
|
||
|
||
width: '100%',
|
||
|
||
height: '100%',
|
||
|
||
opacity: 0
|
||
|
||
});
|
||
|
||
|
||
|
||
var selectHeight = selectbox.outerHeight(true);
|
||
|
||
var searchHeight = search.parent().outerHeight(true);
|
||
|
||
var isMaxHeight = ul.css('max-height');
|
||
|
||
var liSelected = li.filter('.selected');
|
||
|
||
if (liSelected.length < 1) li.first().addClass('selected sel');
|
||
|
||
if (li.data('li-height') === undefined) li.data('li-height', li.outerHeight());
|
||
|
||
var position = dropdown.css('top');
|
||
|
||
if (dropdown.css('left') == 'auto') dropdown.css({left: 0});
|
||
|
||
if (dropdown.css('top') == 'auto') {
|
||
|
||
dropdown.css({top: selectHeight});
|
||
|
||
position = selectHeight;
|
||
|
||
}
|
||
|
||
dropdown.hide();
|
||
|
||
|
||
|
||
// если выбран не дефолтный пункт
|
||
|
||
if (liSelected.length) {
|
||
|
||
// добавляем класс, показывающий изменение селекта
|
||
|
||
if (option.first().text() != optionSelected.text()) {
|
||
|
||
selectbox.addClass('changed');
|
||
|
||
}
|
||
|
||
// передаем селекту класс выбранного пункта
|
||
|
||
selectbox.data('jqfs-class', liSelected.data('jqfs-class'));
|
||
|
||
selectbox.addClass(liSelected.data('jqfs-class'));
|
||
|
||
}
|
||
|
||
|
||
|
||
// если селект неактивный
|
||
|
||
if (el.is(':disabled')) {
|
||
|
||
selectbox.addClass('disabled');
|
||
|
||
return false;
|
||
|
||
}
|
||
|
||
|
||
|
||
// при клике на псевдоселекте
|
||
|
||
divSelect.click(function() {
|
||
|
||
|
||
|
||
// колбек при закрытии селекта
|
||
|
||
if ($('div.jq-selectbox').filter('.opened').length) {
|
||
|
||
opt.onSelectClosed.call($('div.jq-selectbox').filter('.opened'));
|
||
|
||
}
|
||
|
||
|
||
|
||
el.focus();
|
||
|
||
|
||
|
||
// если iOS, то не показываем выпадающий список,
|
||
|
||
// т.к. отображается нативный и неизвестно, как его спрятать
|
||
|
||
if (iOS) return;
|
||
|
||
|
||
|
||
// умное позиционирование
|
||
|
||
var win = $(window);
|
||
|
||
var liHeight = li.data('li-height');
|
||
|
||
var topOffset = selectbox.offset().top;
|
||
|
||
var bottomOffset = win.height() - selectHeight - (topOffset - win.scrollTop());
|
||
|
||
var visible = el.data('visible-options');
|
||
|
||
if (visible === undefined || visible === '') visible = opt.selectVisibleOptions;
|
||
|
||
var minHeight = liHeight * 5;
|
||
|
||
var newHeight = liHeight * visible;
|
||
|
||
if (visible > 0 && visible < 6) minHeight = newHeight;
|
||
|
||
if (visible === 0) newHeight = 'auto';
|
||
|
||
|
||
|
||
var dropDown = function() {
|
||
|
||
dropdown.height('auto').css({bottom: 'auto', top: position});
|
||
|
||
var maxHeightBottom = function() {
|
||
|
||
ul.css('max-height', Math.floor((bottomOffset - 20 - searchHeight) / liHeight) * liHeight);
|
||
|
||
};
|
||
|
||
maxHeightBottom();
|
||
|
||
ul.css('max-height', newHeight);
|
||
|
||
if (isMaxHeight != 'none') {
|
||
|
||
ul.css('max-height', isMaxHeight);
|
||
|
||
}
|
||
|
||
if (bottomOffset < (dropdown.outerHeight() + 20)) {
|
||
|
||
maxHeightBottom();
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
var dropUp = function() {
|
||
|
||
dropdown.height('auto').css({top: 'auto', bottom: position});
|
||
|
||
var maxHeightTop = function() {
|
||
|
||
ul.css('max-height', Math.floor((topOffset - win.scrollTop() - 20 - searchHeight) / liHeight) * liHeight);
|
||
|
||
};
|
||
|
||
maxHeightTop();
|
||
|
||
ul.css('max-height', newHeight);
|
||
|
||
if (isMaxHeight != 'none') {
|
||
|
||
ul.css('max-height', isMaxHeight);
|
||
|
||
}
|
||
|
||
if ((topOffset - win.scrollTop() - 20) < (dropdown.outerHeight() + 20)) {
|
||
|
||
maxHeightTop();
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
if (selectSmartPositioning === true || selectSmartPositioning === 1) {
|
||
|
||
// раскрытие вниз
|
||
|
||
if (bottomOffset > (minHeight + searchHeight + 20)) {
|
||
|
||
dropDown();
|
||
|
||
selectbox.removeClass('dropup').addClass('dropdown');
|
||
|
||
// раскрытие вверх
|
||
|
||
} else {
|
||
|
||
dropUp();
|
||
|
||
selectbox.removeClass('dropdown').addClass('dropup');
|
||
|
||
}
|
||
|
||
} else if (selectSmartPositioning === false || selectSmartPositioning === 0) {
|
||
|
||
// раскрытие вниз
|
||
|
||
if (bottomOffset > (minHeight + searchHeight + 20)) {
|
||
|
||
dropDown();
|
||
|
||
selectbox.removeClass('dropup').addClass('dropdown');
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
// если выпадающий список выходит за правый край окна браузера,
|
||
|
||
// то меняем позиционирование с левого на правое
|
||
|
||
if (selectbox.offset().left + dropdown.outerWidth() > win.width()) {
|
||
|
||
dropdown.css({left: 'auto', right: 0});
|
||
|
||
}
|
||
|
||
// конец умного позиционирования
|
||
|
||
|
||
|
||
$('div.jqselect').css({zIndex: (singleSelectzIndex - 1)}).removeClass('opened');
|
||
|
||
selectbox.css({zIndex: singleSelectzIndex});
|
||
|
||
if (dropdown.is(':hidden')) {
|
||
|
||
$('div.jq-selectbox__dropdown:visible').hide();
|
||
|
||
dropdown.show();
|
||
|
||
selectbox.addClass('opened focused');
|
||
|
||
// колбек при открытии селекта
|
||
|
||
opt.onSelectOpened.call(selectbox);
|
||
|
||
} else {
|
||
|
||
dropdown.hide();
|
||
|
||
selectbox.removeClass('opened dropup dropdown');
|
||
|
||
// колбек при закрытии селекта
|
||
|
||
if ($('div.jq-selectbox').filter('.opened').length) {
|
||
|
||
opt.onSelectClosed.call(selectbox);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
// поисковое поле
|
||
|
||
if (search.length) {
|
||
|
||
search.val('').keyup();
|
||
|
||
notFound.hide();
|
||
|
||
search.keyup(function() {
|
||
|
||
var query = $(this).val();
|
||
|
||
li.each(function() {
|
||
|
||
if (!$(this).html().match(new RegExp('.*?' + query + '.*?', 'i'))) {
|
||
|
||
$(this).hide();
|
||
|
||
} else {
|
||
|
||
$(this).show();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
// прячем 1-ю пустую опцию
|
||
|
||
if (option.first().text() === '' && el.data('placeholder') !== '') {
|
||
|
||
li.first().hide();
|
||
|
||
}
|
||
|
||
if (li.filter(':visible').length < 1) {
|
||
|
||
notFound.show();
|
||
|
||
} else {
|
||
|
||
notFound.hide();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
// прокручиваем до выбранного пункта при открытии списка
|
||
|
||
if (li.filter('.selected').length) {
|
||
|
||
if (el.val() === '') {
|
||
|
||
ul.scrollTop(0);
|
||
|
||
} else {
|
||
|
||
// если нечетное количество видимых пунктов,
|
||
|
||
// то высоту пункта делим пополам для последующего расчета
|
||
|
||
if ( (ul.innerHeight() / liHeight) % 2 !== 0 ) liHeight = liHeight / 2;
|
||
|
||
ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() / 2 + liHeight);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
preventScrolling(ul);
|
||
|
||
|
||
|
||
}); // end divSelect.click()
|
||
|
||
|
||
|
||
// при наведении курсора на пункт списка
|
||
|
||
li.hover(function() {
|
||
|
||
$(this).siblings().removeClass('selected');
|
||
|
||
});
|
||
|
||
var selectedText = li.filter('.selected').text();
|
||
|
||
|
||
|
||
// при клике на пункт списка
|
||
|
||
li.filter(':not(.disabled):not(.optgroup)').click(function() {
|
||
|
||
el.focus();
|
||
|
||
var t = $(this);
|
||
|
||
var liText = t.text();
|
||
|
||
if (!t.is('.selected')) {
|
||
|
||
var index = t.index();
|
||
|
||
index -= t.prevAll('.optgroup').length;
|
||
|
||
t.addClass('selected sel').siblings().removeClass('selected sel');
|
||
|
||
option.prop('selected', false).eq(index).prop('selected', true);
|
||
|
||
selectedText = liText;
|
||
|
||
divText.text(liText);
|
||
|
||
|
||
|
||
// передаем селекту класс выбранного пункта
|
||
|
||
if (selectbox.data('jqfs-class')) selectbox.removeClass(selectbox.data('jqfs-class'));
|
||
|
||
selectbox.data('jqfs-class', t.data('jqfs-class'));
|
||
|
||
selectbox.addClass(t.data('jqfs-class'));
|
||
|
||
|
||
|
||
el.change();
|
||
|
||
}
|
||
|
||
dropdown.hide();
|
||
|
||
selectbox.removeClass('opened dropup dropdown');
|
||
|
||
// колбек при закрытии селекта
|
||
|
||
opt.onSelectClosed.call(selectbox);
|
||
|
||
|
||
|
||
});
|
||
|
||
dropdown.mouseout(function() {
|
||
|
||
$('li.sel', dropdown).addClass('selected');
|
||
|
||
});
|
||
|
||
|
||
|
||
// изменение селекта
|
||
|
||
el.on('change.styler', function() {
|
||
|
||
divText.text(option.filter(':selected').text()).removeClass('placeholder');
|
||
|
||
li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
|
||
|
||
// добавляем класс, показывающий изменение селекта
|
||
|
||
if (option.first().text() != li.filter('.selected').text()) {
|
||
|
||
selectbox.addClass('changed');
|
||
|
||
} else {
|
||
|
||
selectbox.removeClass('changed');
|
||
|
||
}
|
||
|
||
})
|
||
|
||
.on('focus.styler', function() {
|
||
|
||
selectbox.addClass('focused');
|
||
|
||
$('div.jqselect').not('.focused').removeClass('opened dropup dropdown').find('div.jq-selectbox__dropdown').hide();
|
||
|
||
})
|
||
|
||
.on('blur.styler', function() {
|
||
|
||
selectbox.removeClass('focused');
|
||
|
||
})
|
||
|
||
// изменение селекта с клавиатуры
|
||
|
||
.on('keydown.styler keyup.styler', function(e) {
|
||
|
||
var liHeight = li.data('li-height');
|
||
|
||
if (el.val() === '') {
|
||
|
||
divText.text(selectPlaceholder).addClass('placeholder');
|
||
|
||
} else {
|
||
|
||
divText.text(option.filter(':selected').text());
|
||
|
||
}
|
||
|
||
li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
|
||
|
||
// вверх, влево, Page Up, Home
|
||
|
||
if (e.which == 38 || e.which == 37 || e.which == 33 || e.which == 36) {
|
||
|
||
if (el.val() === '') {
|
||
|
||
ul.scrollTop(0);
|
||
|
||
} else {
|
||
|
||
ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// вниз, вправо, Page Down, End
|
||
|
||
if (e.which == 40 || e.which == 39 || e.which == 34 || e.which == 35) {
|
||
|
||
ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() + liHeight);
|
||
|
||
}
|
||
|
||
// закрываем выпадающий список при нажатии Enter
|
||
|
||
if (e.which == 13) {
|
||
|
||
e.preventDefault();
|
||
|
||
dropdown.hide();
|
||
|
||
selectbox.removeClass('opened dropup dropdown');
|
||
|
||
// колбек при закрытии селекта
|
||
|
||
opt.onSelectClosed.call(selectbox);
|
||
|
||
}
|
||
|
||
}).on('keydown.styler', function(e) {
|
||
|
||
// открываем выпадающий список при нажатии Space
|
||
|
||
if (e.which == 32) {
|
||
|
||
e.preventDefault();
|
||
|
||
divSelect.click();
|
||
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
// прячем выпадающий список при клике за пределами селекта
|
||
|
||
if (!onDocumentClick.registered) {
|
||
|
||
$(document).on('click', onDocumentClick);
|
||
|
||
onDocumentClick.registered = true;
|
||
|
||
}
|
||
|
||
|
||
|
||
} // end doSelect()
|
||
|
||
|
||
|
||
// мультиселект
|
||
|
||
function doMultipleSelect() {
|
||
|
||
|
||
|
||
var att = new Attributes();
|
||
|
||
var selectbox =
|
||
|
||
$('<div class="jq-select-multiple jqselect"></div>')
|
||
|
||
.css({
|
||
|
||
display: 'inline-block',
|
||
|
||
position: 'relative'
|
||
|
||
})
|
||
|
||
.attr({
|
||
|
||
id: att.id,
|
||
|
||
title: att.title
|
||
|
||
})
|
||
|
||
.addClass(att.classes)
|
||
|
||
.data(att.data)
|
||
|
||
;
|
||
|
||
|
||
|
||
el.css({margin: 0, padding: 0}).after(selectbox);
|
||
|
||
|
||
|
||
makeList();
|
||
|
||
selectbox.append('<ul>' + list + '</ul>');
|
||
|
||
var ul = $('ul', selectbox).css({
|
||
|
||
'position': 'relative',
|
||
|
||
'overflow-x': 'hidden',
|
||
|
||
'-webkit-overflow-scrolling': 'touch'
|
||
|
||
});
|
||
|
||
var li = $('li', selectbox).attr('unselectable', 'on');
|
||
|
||
var size = el.attr('size');
|
||
|
||
var ulHeight = ul.outerHeight();
|
||
|
||
var liHeight = li.outerHeight();
|
||
|
||
if (size !== undefined && size > 0) {
|
||
|
||
ul.css({'height': liHeight * size});
|
||
|
||
} else {
|
||
|
||
ul.css({'height': liHeight * 4});
|
||
|
||
}
|
||
|
||
if (ulHeight > selectbox.height()) {
|
||
|
||
ul.css('overflowY', 'scroll');
|
||
|
||
preventScrolling(ul);
|
||
|
||
// прокручиваем до выбранного пункта
|
||
|
||
if (li.filter('.selected').length) {
|
||
|
||
ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
// прячем оригинальный селект
|
||
|
||
el.prependTo(selectbox).css({
|
||
|
||
position: 'absolute',
|
||
|
||
left: 0,
|
||
|
||
top: 0,
|
||
|
||
width: '100%',
|
||
|
||
height: '100%',
|
||
|
||
opacity: 0
|
||
|
||
});
|
||
|
||
|
||
|
||
// если селект неактивный
|
||
|
||
if (el.is(':disabled')) {
|
||
|
||
selectbox.addClass('disabled');
|
||
|
||
option.each(function() {
|
||
|
||
if ($(this).is(':selected')) li.eq($(this).index()).addClass('selected');
|
||
|
||
});
|
||
|
||
|
||
|
||
// если селект активный
|
||
|
||
} else {
|
||
|
||
|
||
|
||
// при клике на пункт списка
|
||
|
||
li.filter(':not(.disabled):not(.optgroup)').click(function(e) {
|
||
|
||
el.focus();
|
||
|
||
var clkd = $(this);
|
||
|
||
if(!e.ctrlKey && !e.metaKey) clkd.addClass('selected');
|
||
|
||
if(!e.shiftKey) clkd.addClass('first');
|
||
|
||
if(!e.ctrlKey && !e.metaKey && !e.shiftKey) clkd.siblings().removeClass('selected first');
|
||
|
||
|
||
|
||
// выделение пунктов при зажатом Ctrl
|
||
|
||
if(e.ctrlKey || e.metaKey) {
|
||
|
||
if (clkd.is('.selected')) clkd.removeClass('selected first');
|
||
|
||
else clkd.addClass('selected first');
|
||
|
||
clkd.siblings().removeClass('first');
|
||
|
||
}
|
||
|
||
|
||
|
||
// выделение пунктов при зажатом Shift
|
||
|
||
if(e.shiftKey) {
|
||
|
||
var prev = false,
|
||
|
||
next = false;
|
||
|
||
clkd.siblings().removeClass('selected').siblings('.first').addClass('selected');
|
||
|
||
clkd.prevAll().each(function() {
|
||
|
||
if ($(this).is('.first')) prev = true;
|
||
|
||
});
|
||
|
||
clkd.nextAll().each(function() {
|
||
|
||
if ($(this).is('.first')) next = true;
|
||
|
||
});
|
||
|
||
if (prev) {
|
||
|
||
clkd.prevAll().each(function() {
|
||
|
||
if ($(this).is('.selected')) return false;
|
||
|
||
else $(this).not('.disabled, .optgroup').addClass('selected');
|
||
|
||
});
|
||
|
||
}
|
||
|
||
if (next) {
|
||
|
||
clkd.nextAll().each(function() {
|
||
|
||
if ($(this).is('.selected')) return false;
|
||
|
||
else $(this).not('.disabled, .optgroup').addClass('selected');
|
||
|
||
});
|
||
|
||
}
|
||
|
||
if (li.filter('.selected').length == 1) clkd.addClass('first');
|
||
|
||
}
|
||
|
||
|
||
|
||
// отмечаем выбранные мышью
|
||
|
||
option.prop('selected', false);
|
||
|
||
li.filter('.selected').each(function() {
|
||
|
||
var t = $(this);
|
||
|
||
var index = t.index();
|
||
|
||
if (t.is('.option')) index -= t.prevAll('.optgroup').length;
|
||
|
||
option.eq(index).prop('selected', true);
|
||
|
||
});
|
||
|
||
el.change();
|
||
|
||
|
||
|
||
});
|
||
|
||
|
||
|
||
// отмечаем выбранные с клавиатуры
|
||
|
||
option.each(function(i) {
|
||
|
||
$(this).data('optionIndex', i);
|
||
|
||
});
|
||
|
||
el.on('change.styler', function() {
|
||
|
||
li.removeClass('selected');
|
||
|
||
var arrIndexes = [];
|
||
|
||
option.filter(':selected').each(function() {
|
||
|
||
arrIndexes.push($(this).data('optionIndex'));
|
||
|
||
});
|
||
|
||
li.not('.optgroup').filter(function(i) {
|
||
|
||
return $.inArray(i, arrIndexes) > -1;
|
||
|
||
}).addClass('selected');
|
||
|
||
})
|
||
|
||
.on('focus.styler', function() {
|
||
|
||
selectbox.addClass('focused');
|
||
|
||
})
|
||
|
||
.on('blur.styler', function() {
|
||
|
||
selectbox.removeClass('focused');
|
||
|
||
});
|
||
|
||
|
||
|
||
// прокручиваем с клавиатуры
|
||
|
||
if (ulHeight > selectbox.height()) {
|
||
|
||
el.on('keydown.styler', function(e) {
|
||
|
||
// вверх, влево, PageUp
|
||
|
||
if (e.which == 38 || e.which == 37 || e.which == 33) {
|
||
|
||
ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - liHeight);
|
||
|
||
}
|
||
|
||
// вниз, вправо, PageDown
|
||
|
||
if (e.which == 40 || e.which == 39 || e.which == 34) {
|
||
|
||
ul.scrollTop(ul.scrollTop() + li.filter('.selected:last').position().top - ul.innerHeight() + liHeight * 2);
|
||
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
} // end doMultipleSelect()
|
||
|
||
|
||
|
||
if (el.is('[multiple]')) {
|
||
|
||
|
||
|
||
// если Android или iOS, то мультиселект не стилизуем
|
||
|
||
// причина для Android - в стилизованном селекте нет возможности выбрать несколько пунктов
|
||
|
||
// причина для iOS - в стилизованном селекте неправильно отображаются выбранные пункты
|
||
|
||
if (Android || iOS) return;
|
||
|
||
|
||
|
||
doMultipleSelect();
|
||
|
||
} else {
|
||
|
||
doSelect();
|
||
|
||
}
|
||
|
||
|
||
|
||
}; // end selectboxOutput()
|
||
|
||
|
||
|
||
selectboxOutput();
|
||
|
||
|
||
|
||
// обновление при динамическом изменении
|
||
|
||
el.on('refresh', function() {
|
||
|
||
el.off('.styler').parent().before(el).remove();
|
||
|
||
selectboxOutput();
|
||
|
||
});
|
||
|
||
|
||
|
||
// end select
|
||
|
||
|
||
|
||
// reset
|
||
|
||
} else if (el.is(':reset')) {
|
||
|
||
el.on('click', function() {
|
||
|
||
setTimeout(function() {
|
||
|
||
el.closest('form').find('input, select').trigger('refresh');
|
||
|
||
}, 1);
|
||
|
||
});
|
||
|
||
} // end reset
|
||
|
||
|
||
|
||
}, // init: function()
|
||
|
||
|
||
|
||
// деструктор
|
||
|
||
destroy: function() {
|
||
|
||
|
||
|
||
var el = $(this.element);
|
||
|
||
|
||
|
||
if (el.is(':checkbox') || el.is(':radio')) {
|
||
|
||
el.removeData('_' + pluginName).off('.styler refresh').removeAttr('style').parent().before(el).remove();
|
||
|
||
el.closest('label').add('label[for="' + el.attr('id') + '"]').off('.styler');
|
||
|
||
} else if (el.is('input[type="number"]')) {
|
||
|
||
el.removeData('_' + pluginName).off('.styler refresh').closest('.jq-number').before(el).remove();
|
||
|
||
} else if (el.is(':file') || el.is('select')) {
|
||
|
||
el.removeData('_' + pluginName).off('.styler refresh').removeAttr('style').parent().before(el).remove();
|
||
|
||
}
|
||
|
||
|
||
|
||
} // destroy: function()
|
||
|
||
|
||
|
||
}; // Plugin.prototype
|
||
|
||
|
||
|
||
$.fn[pluginName] = function(options) {
|
||
|
||
var args = arguments;
|
||
|
||
if (options === undefined || typeof options === 'object') {
|
||
|
||
this.each(function() {
|
||
|
||
if (!$.data(this, '_' + pluginName)) {
|
||
|
||
$.data(this, '_' + pluginName, new Plugin(this, options));
|
||
|
||
}
|
||
|
||
})
|
||
|
||
// колбек после выполнения плагина
|
||
|
||
.promise()
|
||
|
||
.done(function() {
|
||
|
||
var opt = $(this[0]).data('_' + pluginName);
|
||
|
||
if (opt) opt.options.onFormStyled.call();
|
||
|
||
});
|
||
|
||
return this;
|
||
|
||
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||
|
||
var returns;
|
||
|
||
this.each(function() {
|
||
|
||
var instance = $.data(this, '_' + pluginName);
|
||
|
||
if (instance instanceof Plugin && typeof instance[options] === 'function') {
|
||
|
||
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
|
||
|
||
}
|
||
|
||
});
|
||
|
||
return returns !== undefined ? returns : this;
|
||
|
||
}
|
||
|
||
};
|
||
|
||
|
||
|
||
// прячем выпадающий список при клике за пределами селекта
|
||
|
||
function onDocumentClick(e) {
|
||
|
||
// e.target.nodeName != 'OPTION' - добавлено для обхода бага в Opera на движке Presto
|
||
|
||
// (при изменении селекта с клавиатуры срабатывает событие onclick)
|
||
|
||
if (!$(e.target).parents().hasClass('jq-selectbox') && e.target.nodeName != 'OPTION') {
|
||
|
||
if ($('div.jq-selectbox.opened').length) {
|
||
|
||
var selectbox = $('div.jq-selectbox.opened'),
|
||
|
||
search = $('div.jq-selectbox__search input', selectbox),
|
||
|
||
dropdown = $('div.jq-selectbox__dropdown', selectbox),
|
||
|
||
opt = selectbox.find('select').data('_' + pluginName).options;
|
||
|
||
|
||
|
||
// колбек при закрытии селекта
|
||
|
||
opt.onSelectClosed.call(selectbox);
|
||
|
||
|
||
|
||
if (search.length) search.val('').keyup();
|
||
|
||
dropdown.hide().find('li.sel').addClass('selected');
|
||
|
||
selectbox.removeClass('focused opened dropup dropdown');
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
onDocumentClick.registered = false;
|
||
|
||
|
||
|
||
})); |