/*! * 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 = $('').addClass(getClass('Inner')), customSelectSpan = $(''); $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({ width: selectBoxWidth, 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);