带样式的弹出菜单

这个想法来自 Veer.com，以及他们如何处理下拉菜单，例如 T恤尺寸。感谢 Dennis Sa。

查看演示

HTML

我们将一个普通的文本输入包装在 <div> 内，其中还包含一个无序列表，该列表将表示弹出菜单的值。

<div class="size">
	<input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
	<ul class="list">
		<li>Male - M</li>
		<li>Female - M</li>
		<li>Male - S</li>
		<li>Female - S</li>
	</ul>
</div>

CSS

默认情况下，列表将隐藏，但仍会全部设置样式并准备就绪，以便在单击触发显示它们时可以使用。

.size { position:relative }
.size .field {
	width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer;
	font-family:'lucida sans unicode',sans-serif; font-size:1em;
	border:solid 1px #EC6603;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.size .field:hover {
	border:solid 1px #fff;
	-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list { display:none;
	position:absolute; left:30px; top:-30px; z-index:999;
	width:300px;
	margin:0; padding:10px; list-style:none;
	background:#fff; color:#333;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
	padding:10px;
	border-bottom: solid 1px #ccc;
}
.size>ul.list li:hover {
	background:#EC6603; color:#fff;
}
.size>ul.list li:last-child { border:none }

jQuery

我们将快速组合一个插件，以便可以在包含相同 HTML 设置的任何 div 包装器上调用此功能。

(function($){
	$.fn.styleddropdown = function(){
		return this.each(function(){
			var obj = $(this)
			obj.find('.field').click(function() { //onclick event, 'list' fadein
			obj.find('.list').fadeIn(400);
			
			$(document).keyup(function(event) { //keypress event, fadeout on 'escape'
				if(event.keyCode == 27) {
				obj.find('.list').fadeOut(400);
				}
			});
			
			obj.find('.list').hover(function(){ },
				function(){
					$(this).fadeOut(400);
				});
			});
			
			obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
			obj.find('.field')
				.val($(this).html())
				.css({
					'background':'#fff',
					'color':'#333'
				});
			obj.find('.list').fadeOut(400);
			});
		});
	};
})(jQuery);

用法

然后，我们只需在 DOM 准备好时调用插件即可。

$(function(){
	$('.size').styleddropdown();
});