diff --git a/jquery.customSelect.js b/jquery.customSelect.js index ce57c28..5bd91ac 100644 --- a/jquery.customSelect.js +++ b/jquery.customSelect.js @@ -5,7 +5,7 @@ * * 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 + * @license http://www.gnu.org/licenses/gpl.html GPL2 License */ (function ($) { @@ -18,42 +18,53 @@ return this; } var defaults = { - customClass: 'customSelect', - mapClass: true, - mapStyle: true + customClass: 'customSelect', + customCSS : { control:{}, selectSpan:{}, selectInnerSpan:{} }, + mapId: true, + idPrefix: 'CS', + mapClass: true, + mapStyle: true, + arrowHint: true, + arrowClass: 'customSelectArrow', }, options = $.extend(defaults, options), - prefix = options.customClass, + getId = function(old_id){ + return options.idPrefix + '-' + old_id; + }, + getClass = function(suffix){ + return options.customClass + suffix; + }, changed = function ($select,customSelectSpan) { var currentSelected = $select.find(':selected'), - customSelectSpanInner = customSelectSpan.children(':first'), + customSelectSpanInner = customSelectSpan.children('.'+getClass('Inner')), 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'); + $(document).off('mouseup.customSelect'); }, 60); - }, - getClass = function(suffix){ - return prefix + suffix; }; return this.each(function () { var $select = $(this), customSelectInnerSpan = $('').addClass(getClass('Inner')), - customSelectSpan = $(''); + customSelectSpan = $(''), + customArrowSpan = $('').addClass(options.arrowClass); + if (options.arrowHint) { + customSelectSpan.append(customArrowSpan); + } $select.after(customSelectSpan.append(customSelectInnerSpan)); - - customSelectSpan.addClass(prefix); + + customSelectSpan.addClass(options.customClass); if (options.mapClass) { customSelectSpan.addClass($select.attr('class')); @@ -61,21 +72,29 @@ if (options.mapStyle) { customSelectSpan.attr('style', $select.attr('style')); } + if (options.mapId) { + customSelectSpan.attr('id', getId($select.attr('id'))); + } $select .addClass('hasCustomSelect') .on('render.customSelect', function () { changed($select,customSelectSpan); - $select.css('width',''); + $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' - }); - + customSelectSpan.css( + $.extend( + { + display: 'inline-block' + }, + options.customCSS.selectSpan + ) + ); + var selectBoxHeight = customSelectSpan.outerHeight(); if ($select.attr('disabled')) { @@ -84,19 +103,38 @@ 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') - }); + customSelectInnerSpan.css( + $.extend( + { + width: selectBoxWidth, + display: 'inline-block' + }, + options.customCSS.selectInnerSpan + ) + ); + + customArrowSpan.css( + $.extend( + { + display: 'inline-block' + }, + options.customCSS.selectArrow + ) + ); + + $select.css( + $.extend( + { + '-webkit-appearance': 'menulist-button', + width: customSelectSpan.outerWidth(), + position: 'absolute', + opacity: 0, + height: selectBoxHeight, + fontSize: customSelectSpan.css('font-size') + }, + options.customCSS.control + ) + ); }) .on('change.customSelect', function () { customSelectSpan.addClass(getClass('Changed')); @@ -116,7 +154,7 @@ 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'){ diff --git a/jquery.customSelect.min.js b/jquery.customSelect.min.js index e68c5e1..1ac2fa9 100644 --- a/jquery.customSelect.min.js +++ b/jquery.customSelect.min.js @@ -1,10 +1,10 @@ -/*! - * jquery.customSelect() - v0.5.1 - * http://adam.co/lab/jquery/customselect/ - * 2014-04-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(a){a.fn.extend({customSelect:function(c){if(typeof document.body.style.maxHeight==="undefined"){return this}var e={customClass:"customSelect",mapClass:true,mapStyle:true},c=a.extend(e,c),d=c.customClass,f=function(h,k){var g=h.find(":selected"),j=k.children(":first"),i=g.html()||" ";j.html(i);if(g.attr("disabled")){k.addClass(b("DisabledOption"))}else{k.removeClass(b("DisabledOption"))}setTimeout(function(){k.removeClass(b("Open"));a(document).off("mouseup.customSelect")},60)},b=function(g){return d+g};return this.each(function(){var g=a(this),i=a("").addClass(b("Inner")),h=a("");g.after(h.append(i));h.addClass(d);if(c.mapClass){h.addClass(g.attr("class"))}if(c.mapStyle){h.attr("style",g.attr("style"))}g.addClass("hasCustomSelect").on("render.customSelect",function(){f(g,h);g.css("width","");var k=parseInt(g.outerWidth(),10)-(parseInt(h.outerWidth(),10)-parseInt(h.width(),10));h.css({display:"inline-block"});var j=h.outerHeight();if(g.attr("disabled")){h.addClass(b("Disabled"))}else{h.removeClass(b("Disabled"))}i.css({width:k,display:"inline-block"});g.css({"-webkit-appearance":"menulist-button",width:h.outerWidth(),position:"absolute",opacity:0,height:j,fontSize:h.css("font-size")})}).on("change.customSelect",function(){h.addClass(b("Changed"));f(g,h)}).on("keyup.customSelect",function(j){if(!h.hasClass(b("Open"))){g.trigger("blur.customSelect");g.trigger("focus.customSelect")}else{if(j.which==13||j.which==27){f(g,h)}}}).on("mousedown.customSelect",function(){h.removeClass(b("Changed"))}).on("mouseup.customSelect",function(j){if(!h.hasClass(b("Open"))){if(a("."+b("Open")).not(h).length>0&&typeof InstallTrigger!=="undefined"){g.trigger("focus.customSelect")}else{h.addClass(b("Open"));j.stopPropagation();a(document).one("mouseup.customSelect",function(k){if(k.target!=g.get(0)&&a.inArray(k.target,g.find("*").get())<0){g.trigger("blur.customSelect")}else{f(g,h)}})}}}).on("focus.customSelect",function(){h.removeClass(b("Changed")).addClass(b("Focus"))}).on("blur.customSelect",function(){h.removeClass(b("Focus")+" "+b("Open"))}).on("mouseenter.customSelect",function(){h.addClass(b("Hover"))}).on("mouseleave.customSelect",function(){h.removeClass(b("Hover"))}).trigger("render.customSelect")})}})})(jQuery); \ No newline at end of file +/*! + * jquery.customSelect() - v0.5.1 + * http://adam.co/lab/jquery/customselect/ + * 2014-04-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(e){"use strict";e.fn.extend({customSelect:function(t){if("undefined"==typeof document.body.style.maxHeight)return this;var s={customClass:"customSelect",customCSS:{control:{},selectSpan:{},selectInnerSpan:{}},mapId:!0,idPrefix:"CS",mapClass:!0,mapStyle:!0,arrowHint:!0,arrowClass:"customSelectArrow"},t=e.extend(s,t),n=function(e){return t.idPrefix+"-"+e},o=function(e){return t.customClass+e},a=function(t,s){var n=t.find(":selected"),a=s.children("."+o("Inner")),c=n.html()||" ";a.html(c),n.attr("disabled")?s.addClass(o("DisabledOption")):s.removeClass(o("DisabledOption")),setTimeout(function(){s.removeClass(o("Open")),e(document).off("mouseup.customSelect")},60)};return this.each(function(){var s=e(this),c=e("").addClass(o("Inner")),l=e(""),r=e("").addClass(t.arrowClass);t.arrowHint&&l.append(r),s.after(l.append(c)),l.addClass(t.customClass),t.mapClass&&l.addClass(s.attr("class")),t.mapStyle&&l.attr("style",s.attr("style")),t.mapId&&l.attr("id",n(s.attr("id"))),s.addClass("hasCustomSelect").on("render.customSelect",function(){a(s,l),s.css("width","");var n=parseInt(s.outerWidth(),10)-(parseInt(l.outerWidth(),10)-parseInt(l.width(),10));l.css(e.extend({display:"inline-block"},t.customCSS.selectSpan));var u=l.outerHeight();s.attr("disabled")?l.addClass(o("Disabled")):l.removeClass(o("Disabled")),c.css(e.extend({width:n,display:"inline-block"},t.customCSS.selectInnerSpan)),r.css(e.extend({display:"inline-block"},t.customCSS.selectArrow)),s.css(e.extend({"-webkit-appearance":"menulist-button",width:l.outerWidth(),position:"absolute",opacity:0,height:u,fontSize:l.css("font-size")},t.customCSS.control))}).on("change.customSelect",function(){l.addClass(o("Changed")),a(s,l)}).on("keyup.customSelect",function(e){l.hasClass(o("Open"))?(13==e.which||27==e.which)&&a(s,l):(s.trigger("blur.customSelect"),s.trigger("focus.customSelect"))}).on("mousedown.customSelect",function(){l.removeClass(o("Changed"))}).on("mouseup.customSelect",function(t){l.hasClass(o("Open"))||(e("."+o("Open")).not(l).length>0&&"undefined"!=typeof InstallTrigger?s.trigger("focus.customSelect"):(l.addClass(o("Open")),t.stopPropagation(),e(document).one("mouseup.customSelect",function(t){t.target!=s.get(0)&&e.inArray(t.target,s.find("*").get())<0?s.trigger("blur.customSelect"):a(s,l)})))}).on("focus.customSelect",function(){l.removeClass(o("Changed")).addClass(o("Focus"))}).on("blur.customSelect",function(){l.removeClass(o("Focus")+" "+o("Open"))}).on("mouseenter.customSelect",function(){l.addClass(o("Hover"))}).on("mouseleave.customSelect",function(){l.removeClass(o("Hover"))}).trigger("render.customSelect")})}})}(jQuery); \ No newline at end of file