Skip to content

Instantly share code, notes, and snippets.

@gregplaysguitar
Created August 18, 2010 02:54
Show Gist options
  • Save gregplaysguitar/533207 to your computer and use it in GitHub Desktop.
Save gregplaysguitar/533207 to your computer and use it in GitHub Desktop.
div.customselect {
position: relative;
display: block;
width: 240px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 100;
background: #F2FFDC;
color: #333;
padding: 0;
}
div.customselect.visible {
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
div.customselect .iconselect {
cursor: pointer;
padding: 2px 5px;
height: 20px;
}
div.customselect .iconselect.prompt-visible {
opacity: 0.8;
}
div.customselect .selectwrapper {
display:none;
position: absolute;
top: 24px;
width: 100%;
}
div.customselect .selectwrapper .optionswrapper {
height: auto;
margin: 0;
background: #F2FFDC;
padding: 0 0 5px 0;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
div.customselect .selectwrapper .selectitems {
z-index: 10000;
cursor: default;
padding: 0 5px;
height: 25px;
line-height: 25px;
text-transform: none;
color: #666;
}
div.customselect .selectwrapper .last {}
div.customselect .selectfooter {
display: none;
}
div.customselect .selectwrapper .selectitems.hoverclass,
div.customselect .selectwrapper .selectitems.selectedclass{
color: #000;
cursor: pointer;
}
div.customselect.error {
border: 1px solid red;
}
/*
Usage:
$('select.custom').customSelect({
required: true, // default is false
titleprompt: false // default is true
});
*/
$.fn.customSelect = (function(userOptions){
// Select Customizer jQuery plug-in
// based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
// modified by David Vian http://www.ildavid.com/dblog
// and then modified AGAIN be Dean Collins http://www.dblog.com.au
// tidied up by Greg Brown 2010 http://gregbrown.co.nz/
var options = {
required: false,
titleprompt: true
};
$.extend(options, userOptions);
currently_open = [];
function clear_currently_open() {
for (var i = 0; i < currently_open.length; i++) {
currently_open[i].css('zIndex', 1).find('.selectwrapper').fadeOut(200);
currently_open[i].parent().css('zIndex', 1);
}
currently_open = [];
};
return this.each(function(){
var me = $(this);
var name = me.attr('id');
var container = $('<div>').addClass('customselect');
var hidden_input = $('<input type="hidden" value="' + me.val() + '" name="' + this.name + '">');
me.after(container);
container.append(hidden_input);
container.append('<div class="iconselect">' + $(this).find(':selected').text() + '</div>');
container.append($('<div>').addClass('selectwrapper'));
var holder = container.find('.selectwrapper');
holder.append($('<div>').addClass('optionswrapper'));
me.find('option').each(function(i, item){
if (i === 0 && !$(this).attr("value") && options.required && !options.titleprompt) {
container.find('.iconselect').html($(this).html()).addClass('prompt-visible');
}
else {
holder.find('.optionswrapper').append('<div title="' + $(this).attr("value") + '" class="selectitems"><span>' + $(this).html() + '</span></div>');
}
});
if (options.titleprompt && !$(this).find(':selected').attr('value')) {
container.find('.iconselect').html(me.attr('title')).addClass('prompt-visible');
}
me.remove();
function show(holder, e) {
var hideThis = function() {
container.parent().css({zIndex: 1});
container.css({
zIndex: 1
})
holder.fadeOut(200);
$('body').unbind('click', hideThis);
container.removeClass('visible');
};
if(holder.css('display') == 'none') {
clear_currently_open();
container.addClass('visible');
holder.fadeIn(200);
holder.focus();
container.css({
zIndex: 2000,
position: 'relative'
});
container.parent().css({
zIndex: 2000
})
if (e) {
e.stopPropagation();
}
currently_open.push(container);
$('body').click(hideThis);
} else {
hideThis();
}
};
container.find('.iconselect').click(function(e){
show(holder, e);
});
holder.append('<div class="selectfooter"></div>');
holder.find('.optionswrapper > div:last').addClass("last");
container.find(".selectwrapper .selectitems").mouseover(function(){
$(this).addClass("hoverclass");
});
container.find(".selectwrapper .selectitems").mouseout(function(){
$(this).removeClass("hoverclass");
});
container.find(".selectwrapper .selectitems").click(function(){
holder.find(".selectedclass").removeClass("selectedclass");
$(this).addClass("selectedclass");
var thisselection = $(this).html();
hidden_input.val(this.title);
hidden_input.change();
if (options.titleprompt) {
if (this.title) {
container.find('.iconselect').html(thisselection).removeClass('prompt-visible');
}
else {
container.find('.iconselect').html(me.attr('title')).addClass('prompt-visible');
}
}
else {
container.find('.iconselect').html(thisselection).removeClass('prompt-visible');
}
holder.fadeOut(250);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment