153 lines
6.7 KiB
JavaScript
153 lines
6.7 KiB
JavaScript
/*!
|
|
* jquery.customSelect() - v0.5.1
|
|
* http://adam.co/lab/jquery/customselect/
|
|
* 2014-03-19
|
|
*
|
|
* Copyright 2013 Adam Coulombe
|
|
* @license http://www.opensource.org/licenses/mit-license.html MIT License
|
|
* @license http://www.gnu.org/licenses/gpl.html GPL2 License
|
|
*/
|
|
|
|
(function ($) {
|
|
'use strict';
|
|
|
|
$.fn.extend({
|
|
customSelect: function (options) {
|
|
// filter out <= IE6
|
|
if (typeof document.body.style.maxHeight === 'undefined') {
|
|
return this;
|
|
}
|
|
var defaults = {
|
|
customClass: 'customSelect',
|
|
mapClass: true,
|
|
mapStyle: true
|
|
},
|
|
options = $.extend(defaults, options),
|
|
prefix = options.customClass,
|
|
changed = function ($select,customSelectSpan) {
|
|
var currentSelected = $select.find(':selected'),
|
|
customSelectSpanInner = customSelectSpan.children(':first'),
|
|
html = currentSelected.html() || ' ';
|
|
|
|
customSelectSpanInner.html(html);
|
|
|
|
if (currentSelected.attr('disabled')) {
|
|
customSelectSpan.addClass(getClass('DisabledOption'));
|
|
} else {
|
|
customSelectSpan.removeClass(getClass('DisabledOption'));
|
|
}
|
|
|
|
setTimeout(function () {
|
|
customSelectSpan.removeClass(getClass('Open'));
|
|
$(document).off('mouseup.customSelect');
|
|
}, 60);
|
|
},
|
|
getClass = function(suffix){
|
|
return prefix + suffix;
|
|
};
|
|
|
|
return this.each(function () {
|
|
var $select = $(this),
|
|
customSelectInnerSpan = $('<span />').addClass(getClass('Inner')),
|
|
customSelectSpan = $('<span />');
|
|
|
|
$select.after(customSelectSpan.append(customSelectInnerSpan));
|
|
|
|
customSelectSpan.addClass(prefix);
|
|
|
|
if (options.mapClass) {
|
|
customSelectSpan.addClass($select.attr('class'));
|
|
}
|
|
if (options.mapStyle) {
|
|
customSelectSpan.attr('style', $select.attr('style'));
|
|
}
|
|
|
|
$select
|
|
.addClass('hasCustomSelect')
|
|
.on('render.customSelect', function () {
|
|
changed($select,customSelectSpan);
|
|
$select.css('width','');
|
|
var selectBoxWidth = parseInt($select.outerWidth(), 10) -
|
|
(parseInt(customSelectSpan.outerWidth(), 10) -
|
|
parseInt(customSelectSpan.width(), 10));
|
|
|
|
// Set to inline-block before calculating outerHeight
|
|
customSelectSpan.css({
|
|
display: 'inline-block'
|
|
});
|
|
|
|
var selectBoxHeight = customSelectSpan.outerHeight();
|
|
|
|
if ($select.attr('disabled')) {
|
|
customSelectSpan.addClass(getClass('Disabled'));
|
|
} else {
|
|
customSelectSpan.removeClass(getClass('Disabled'));
|
|
}
|
|
|
|
customSelectInnerSpan.css({
|
|
display: 'inline-block'
|
|
});
|
|
|
|
$select.css({
|
|
'-webkit-appearance': 'menulist-button',
|
|
width: customSelectSpan.outerWidth(),
|
|
position: 'absolute',
|
|
opacity: 0,
|
|
height: selectBoxHeight,
|
|
fontSize: customSelectSpan.css('font-size')
|
|
});
|
|
})
|
|
.on('change.customSelect', function () {
|
|
customSelectSpan.addClass(getClass('Changed'));
|
|
changed($select,customSelectSpan);
|
|
})
|
|
.on('keyup.customSelect', function (e) {
|
|
if(!customSelectSpan.hasClass(getClass('Open'))){
|
|
$select.trigger('blur.customSelect');
|
|
$select.trigger('focus.customSelect');
|
|
}else{
|
|
if(e.which==13||e.which==27){
|
|
changed($select,customSelectSpan);
|
|
}
|
|
}
|
|
})
|
|
.on('mousedown.customSelect', function () {
|
|
customSelectSpan.removeClass(getClass('Changed'));
|
|
})
|
|
.on('mouseup.customSelect', function (e) {
|
|
|
|
if( !customSelectSpan.hasClass(getClass('Open'))){
|
|
// if FF and there are other selects open, just apply focus
|
|
if($('.'+getClass('Open')).not(customSelectSpan).length>0 && typeof InstallTrigger !== 'undefined'){
|
|
$select.trigger('focus.customSelect');
|
|
}else{
|
|
customSelectSpan.addClass(getClass('Open'));
|
|
e.stopPropagation();
|
|
$(document).one('mouseup.customSelect', function (e) {
|
|
if( e.target != $select.get(0) && $.inArray(e.target,$select.find('*').get()) < 0 ){
|
|
$select.trigger('blur.customSelect');
|
|
}else{
|
|
changed($select,customSelectSpan);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.on('focus.customSelect', function () {
|
|
customSelectSpan.removeClass(getClass('Changed')).addClass(getClass('Focus'));
|
|
})
|
|
.on('blur.customSelect', function () {
|
|
customSelectSpan.removeClass(getClass('Focus')+' '+getClass('Open'));
|
|
})
|
|
.on('mouseenter.customSelect', function () {
|
|
customSelectSpan.addClass(getClass('Hover'));
|
|
})
|
|
.on('mouseleave.customSelect', function () {
|
|
customSelectSpan.removeClass(getClass('Hover'));
|
|
})
|
|
.trigger('render.customSelect');
|
|
});
|
|
}
|
|
});
|
|
})(jQuery);
|