/*! * jquery.customSelect() - v0.4.1 * http://adam.co/lab/jquery/customselect/ * 2013-05-13 * * 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.'+getClass('Open')); }, 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('update', function () { changed($select,customSelectSpan); 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', function () { customSelectSpan.addClass(getClass('Changed')); changed($select,customSelectSpan); }) .on('keyup', function (e) { if(!customSelectSpan.hasClass(getClass('Open'))){ $select.blur(); $select.focus(); }else{ if(e.which==13||e.which==27){ changed($select,customSelectSpan); } } }) .on('mousedown', function (e) { customSelectSpan.removeClass(getClass('Changed')); }) .on('mouseup', 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.focus(); }else{ customSelectSpan.addClass(getClass('Open')); e.stopPropagation(); $(document).one('mouseup.'+getClass('Open'), function (e) { if( e.target != $select.get(0) && $.inArray(e.target,$select.find('*').get()) < 0 ){ $select.blur(); }else{ changed($select,customSelectSpan); } }); } } }) .focus(function () { customSelectSpan.removeClass(getClass('Changed')).addClass(getClass('Focus')); }) .blur(function () { customSelectSpan.removeClass(getClass('Focus')+' '+getClass('Open')); }) .hover(function () { customSelectSpan.addClass(getClass('Hover')); }, function () { customSelectSpan.removeClass(getClass('Hover')); }) .trigger('update'); }); } }); })(jQuery);