[转]jquery美化select下拉框
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleSelect美化-d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select美化-download by http://www.codefans.net</title>
<style type="text/css">
body{ background-color: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif}
a{ text-decoration:none;outline:none;hide-focus:expression(this.hideFocus=true);}
.selectBox{width:100px}
.selectBox a{
display:block; background:url(http://www.codefans.net/jscss/demoimg/201110/selectBG.gif) left top;padding-left:10px; color:#79a2bd;
line-height:24px!important;line-height:26px;height:24px; overflow:hidden;
}
.selectBox a:hover{background-position:left -24px}
.selectBox a:hover.open,.selectBox a.open{background-position:left -48px}
.selectBox p{
margin:0; padding:0;display:none; position: absolute; width:100px;
background:url(selectBG.gif) left bottom; padding-bottom:6px;
}
.selectBox p a{background-position:left -160px}
.selectBox p a.current{background-position:left -96px; color:#fff}
.selectBox p a:hover{background-position:left -72px; color:#fff}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
if(this.className == "open"){
closeSelect(this);
}else{
this.className = "open";
$(this.nextSibling).slideDown("fast");
}
e.stopPropagation();
});
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
/*var aList = PObj.getElementsByTagName("a");
for(var i=0;i<aList.length;i++){
aList[i].className = "";
}*/
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});
</script>
</head>
<body>
<div class="selectBox">
<a href="javascript:void(0);" id="aa">请选择类别</a><p>
<a href="javascript:void(0)" class="current" value="">请选择类别</a>
<a href="javascript:void(0)" value="dc">数码相机</a>
<a href="javascript:void(0)" value="lcd">液晶显示器</a>
<a href="javascript:void(0)" value="mobile">智能手机</a>
<a href="javascript:void(0)" value="oven">微波炉</a>
</p><input type="hidden" name="category" id="category" value="no" />
</div>
<input type="button" onclick="alert($('#category').val());" value="取值" />
</body>
</html>
- 上一篇：[转]jqueryui icons图标说明
- 下一篇：[原]select下拉框美化
精彩图集
精彩文章