Adding the latest version of jquery custom select plugin

This commit is contained in:
Pavel Pavlov
2014-07-10 20:07:02 +03:00
parent a428e94106
commit 49836649a1
3 changed files with 177 additions and 0 deletions
@@ -0,0 +1,153 @@
/*!
* 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() || '&nbsp;';
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({
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);
@@ -0,0 +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()||"&nbsp;";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("<span />").addClass(b("Inner")),h=a("<span />");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);
@@ -0,0 +1,14 @@
{
"name": "jquery.customSelect",
"filename": "jquery.customSelect.min.js",
"version": "0.5.1",
"description": "Custom Select Box CSS Style Plugin",
"homepage": "https://github.com/adamcoulombe/jquery.customSelect",
"repositories": [
{
"type": "git",
"url": "https://github.com/adamcoulombe/jquery.customSelect"
}
],
"bugs": "https://github.com/adamcoulombe/jquery.customSelect"
}