On gists

Select plugin

jQuery jQuery-plugins

select.js Raw #

(function($){
	
	$.fn.tzSelect = function(options){
		options = $.extend({
			render : function(option){
				return $('<li>',{
					html : option.text()
				});
			},
			className : ''
		},options);
		
		return this.each(function(){
			
			// The "this" points to the current select element:
			
			var select = $(this);
		
			var selectBoxContainer = $('<div>',{
				width		: select.outerWidth(),
				className	: 'tzSelect',
				html		: '<div class="selectBox"></div>'
			});
		
			var dropDown = $('<ul>',{className:'dropDown'});
			var selectBox = selectBoxContainer.find('.selectBox');
			
			// Looping though the options of the original select element

			if(options.className){
				dropDown.addClass(options.className);
			}
			
			select.find('option').each(function(i){
				var option = $(this);
		
				if(i==select.attr('selectedIndex')){
					selectBox.html(option.text());
				}
				
				// As of jQuery 1.4.3 we can access HTML5 
				// data attributes with the data() method.
				
				if(option.data('skip')){
					return true;
				}
				
				// Creating a dropdown item according to the
				// data-icon and data-html-text HTML5 attributes:
				
				var li = options.render(option);

				li.click(function(){
					
					selectBox.html(option.text());
					dropDown.trigger('hide');
					
					// When a click occurs, we are also reflecting
					// the change on the original select element:
					select.val(option.val());
					
					return false;
				});
		
				dropDown.append(li);
			});
			
			selectBoxContainer.append(dropDown.hide());
			select.hide().after(selectBoxContainer);
			
			// Binding custom show and hide events on the dropDown:
			
			dropDown.bind('show',function(){
				
				if(dropDown.is(':animated')){
					return false;
				}
				
				selectBox.addClass('expanded');
				dropDown.slideDown();
				
			}).bind('hide',function(){
				
				if(dropDown.is(':animated')){
					return false;
				}
				
				selectBox.removeClass('expanded');
				dropDown.slideUp();
				
			}).bind('toggle',function(){
				if(selectBox.hasClass('expanded')){
					dropDown.trigger('hide');
				}
				else dropDown.trigger('show');
			});
			
			selectBox.click(function(){
				dropDown.trigger('toggle');
				return false;
			});
		
			// If we click anywhere on the page, while the
			// dropdown is shown, it is going to be hidden:
			
			$(document).click(function(){
				dropDown.trigger('hide');
			});

		});
	}
	
})(jQuery);

usage.js Raw #

$(document).ready(function(){
	
	$('select.makeMeFancy').tzSelect({
		render : function(option){
			return $('<li>',{
				html:	'<img src="'+option.data('icon')+'" /><span>'+
						option.data('html-text')+'</span>'
			});
		},
		className : 'hasDetails'
	});
	
	// Calling the default version of the dropdown
	$('select.regularSelect').tzSelect();

});

select.css Raw #

/*-------------------------------
*	Default dropdown styles
--------------------------------*/

.tzSelect{
	
	/* This is the container of the new select element */
	
	height:34px;
	display:inline-block;
	min-width:200px;
	position:relative;
	margin:5px;
	
	/* Preloading the background image for the dropdown */
	background:url("img/dropdown_slice.png") no-repeat -99999px;
}

.tzSelect .selectBox{
	position:absolute;
	
	height:100%;
	width:100%;
	
	/* Font settings */
	
	font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align:center;
	text-shadow:1px 1px 0 #EEEEEE;
	color:#666666;

	/* Using CSS3 multiple backgrounds and a fallback */
	
	background:url('img/select_slice.png') repeat-x #ddd;
	background-image:url('img/select_slice.png'),url('img/select_slice.png'),url('img/select_slice.png'),url('img/select_slice.png');
	background-position:0 -136px, right -204px, 50% -68px, 0 0;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
	
	cursor:pointer;
	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

.tzSelect .selectBox:hover,
.tzSelect .selectBox.expanded{
	background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
	color:#2c5667;
	text-shadow:1px 1px 0 #9bc2d0;
}

.tzSelect .dropDown{
	position:absolute;
	top:40px;
	left:0;
	width:100%;
	border:1px solid #32333b;
	list-style:none;
	z-index:1000;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
	-moz-box-shadow:0 0 4px #111;
	-webkit-box-shadow:0 0 4px #111;
	box-shadow:0 0 4px #111;
}

.tzSelect li{
	background-color:#222;
	cursor:pointer;
	padding:6px;
	text-align:center;
}

.tzSelect li:hover{
	background-color:#292929;
}


/*-----------------------------------------------------
*	Additional styles for the apple product dropdown
------------------------------------------------------*/


.tzSelect .hasDetails{
	border-width:0 1px 1px;
}

.tzSelect .hasDetails li{
	height:85px;
	position:relative;
	padding:0;
	text-align:left;
	
	/* Again, using CSS3 multiple backgrounds with a fallback */
	
	background:url('img/dropdown_slice.png') repeat-x #222;
	background-image:url('img/dropdown_slice.png'),url('img/dropdown_slice.png'),url('img/dropdown_slice.png');
	background-position: 50% -171px, 0 -85px, 0 0;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

.tzSelect .hasDetails li:hover{
	background-position: 50% -256px, 0 -85px, 0 0;
}

.tzSelect .hasDetails li span{
	left:88px;
	position:absolute;
	top:27px;
}

.tzSelect .hasDetails li i{
	color:#999999;
	display:block;
	font-size:12px;
}

.tzSelect .hasDetails li img{
	left:9px;
	position:absolute;
	top:13px;
}