jquery.dropnice.js

/*
 * jQuery DropNice Plugin
 * http://github.com/shadowhand/jquery-dropnice
 *
 * Copyright (c) 2010 Woody Gilk <woody@wingsc.com>
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Requires: jQuery 1.3+
 */
jQuery.fn.dropnice = function(settings){
	settings = jQuery.extend({
		format: function(value, title) { return '<a rel="'+ value +'">'+ title +'</a>'; }
	}, settings);
	return this.each(function(){
		var self = jQuery(this); // Dropdown
		var wrap = jQuery('<div class="dropnice"></div>'); // Wrapper
		var curr = jQuery('<div class="selected"></div>').appendTo(wrap); // Selected option
		var opts = jQuery('<div class="options"></div>').hide().appendTo(wrap); // Options wrapper
		var list = jQuery('<ul></ul>').appendTo(opts); // Options list
		self.find('option').each(function()
		{
			var o = jQuery(this); // Option
			var v = o.val(); // Value of option
			var t = o.text(); // Text of option
			var i = jQuery('<li class="option"></li>').appendTo(list); // List item
			var a = jQuery(settings.format(v, t)).appendTo(i); // Item link
			a.click(function()
			{
				self.val(v).change(); // Change selected value
				curr.html(a.clone()); // Update selected class
				return false; // Stop the "click" event
			});
			if (o.attr('selected')) { curr.html(a.clone()); } // Activate selected value
		});
		wrap.insertAfter(self.hide()); // Replace select

		var optsHeight = opts.show().height();
		opts.hide().css({ 
			height: 0, 
			width: wrap.width(), // Options should match the width of the wrapper
			overflow: 'hidden' 
		});
		wrap.hover(function()
		{
			opts.stop().show().animate({ height: optsHeight });
		},
		function()
		{
			opts.stop().animate({ height: 0 }, function(){
				opts.hide();
			});
		});
	});
};