JQuery美化下拉框插件

84403067

2014-01-19

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery下拉框组件</title>
<style type="text/css">
body{font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif; }

.ui-select
{ 
	display:inline-block;	
	font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif;
	border:#bbb solid 1px;
	border-radius: 3px;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
	background-image: -moz-linear-gradient(top,#ffffff,#efefef);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
	cursor: pointer;	
	vertical-align: top;
	zoom:1;
	_height:25px;
}

.ui-select:hover{ box-shadow:#bbb 0px 0px 2px; }
.ui-select .default{line-height:20px; padding:2px 5px; overflow:hidden; display:block; zoom:1;}
.ui-select .default span{ float:left; }
.ui-select .default label{ font-size:10px; padding-left:3px; border-left:#bbb solid 1px; margin-left:6px; font-weight:700; float:right;}
.ui-select ul
{
	margin:0;
	padding:0; 
	list-style:none; 
	position:absolute; 
	display:block;
	border:#bbb solid 1px; 
	margin-left:-1px; 
	line-height:22px;
	border-bottom-right-radius: 3px 3px;
	border-bottom-left-radius: 3px 3px;
	text-align:left;
	background:#fff;
	display:none;
}
.ui-select li{ text-indent: 5px;}
.ui-select li:hover , .ui-select li.active{ background:#0bF; color:#fff;}
</style>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
/**
 * 使用说明：
 * 需要引人 ui-select.css
 * 使用方法一：
 * html：
 *	<select name="sex" >
 *		<option value="1">man</option>
 *		<option value="2">woman</option>
 *	</select>
 * js：
 * $('select').select();
 *
 * 使用方法二：从网络中加载数据
 * $('select').select({url:'1.jsp'});
 *
 */
(function($){

	$.fn.select = function(options){
		//定义常量
		var settings = $.extend({},options);
		
		this.each(function() {
			//html template
			var $html = $('<span class="ui-select"><span class="default"><label>▼</label><span></span></span><ul></ul></span>');
			//将下拉框隐藏，把模版插入其后
			var $this = $(this).hide().after($html);
			//声明全局变量
			var $list = $html.find('ul'),$default = $html.find('.default'),$span = $default.find('span'),$label = $default.find('label');
			//从网络加载数据
			if(settings.url){
				$.ajax({
					url: settings.url,
					dataType:'json',
					async : false,
					success: function(data){
						//得到已经存在的option个数
						var size = $this.find('option').size();
						$.each(data,function(i,option){
							//由于ie6 的bug ，不得不采用原生的方式对DOM进行操作
							$this[0].options[i+size] = new Option(option.text,option.value);
						});
					}
				});
			}
			
			//将option遍历到li中
			$this.find('option').each(function(){
				var $option = $(this);
				$('<li val="'+$option.val()+'">'+$option.text()+'</li>').appendTo($list);

				if($option.prop('selected') === true){
					$this.val($option.val());
					$span.text($option.text());
				}
			});
			//计算下拉框宽度
			if($span.text() === ''){
				var $li = $list.find('li').first();
				$this.val($li.attr('val'));
				$span.text($li.text());
			}
			$span.width($list.width());
			//click 事件
			$default.width($span.outerWidth()+$label.outerWidth(true)).click(function(event){
				//阻止事件冒泡
				event.stopPropagation();
				if(!$list.find('li').size())
					return ;
				$list.slideToggle(200);
			});
			$html.width($default.outerWidth());
			$list.width($default.outerWidth());
			
			$list.find('li').click(function(){
				var $li = $(this);
				$span.text($li.text());
				if($this.val() != $li.attr('val'))
					$this.val($li.attr('val')).change();
			}).hover(function(){
				$(this).toggleClass('active');
			});
			
			$this.change(function(){
				var index = $this[0].selectedIndex,$li = $list.find('li:eq('+index+')');
				$span.text($li.text());
			});

			$(document).click(function(){
				$list.slideUp(200);
			});
		});
		return this;
	};
})(jQuery);


$(function(){
	$('select[name="sex"]').select();
	$('select[name="ttt"]').select({url:'/1.jsp'}).change(function(){
		alert(this.value);
	});
});

</script>
</head>

<body>
	<form action="?">
	<select name="sex" >
		<option value="1">man</option>
		<option value="2">woman</option>
	</select>
	fdsafdsafds
	<input type="submit" value="send"/>
	
	
	<select name="ttt" id="ttt" >
		<option value="t">测试</option>
		<option value="5" selected>测试2</option>
	</select>
	</form>
</body>
</html>

下拉框 jquery