前两天看到点点http://mianshiti.diandian.com/有一个这个题,利用js实现selector,有人要问本来有selector为什么还要js重写一遍,岂不是不此一举?当然不是,selector不像。net控件那样它是死的,不能由后台提供数据,由于是死的它的样式是单一,这样对于做一个友好的界面是不可取的,自己感觉特别硬。
下面的例子主要是css的伪类(以前没用过,用了感觉很好),使用伪类的原因有两个这个不需要重新js代码,同时现代浏览器大多数都支持伪类,既然这是个趋势,就应该好好用下去;另一个就是用了jq的函数,因为不是很熟悉,只是“有形无实”,进入正文。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selector</title>
<style type="text/css">
body *{
margin:0;
padding-left: 5px;
}
div{
padding: 0;
width:180px;
}
a{
border: 1px solid #efefef;
text-decoration: none;
vertical-align: middle;
border-left: 0;
padding-left: 0;
width:14%;
}
input[type="text"]{
width:85%;
vertical-align: middle;
border: 1px solid #efefef;
margin-right: 0;
}
input[type="text"]:focus{
border: 1px solid #808080;
}
#city-list{
width:97%;
padding: 0;
list-style: none;
border: 1px solid #efefef;
border-top:0;
}
li{
font-size: 13px;
}
li:hover{
cursor: pointer;
background-color: #0000ea;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<input type="text" id="input_city"><a href="#">↓</a>
<ul id="city-list" style="display: none;">
<li>北京</li>
<li>杭州</li>
<li>上海</li>
<li>秦皇岛</li>
</ul>
</div>
<script type="text/javascript">
$("a").bind("click",function(){
var _list = $("ul#city-list")[0];
if(_list.style.display==="none"){
$(_list).slideDown("slow");
}else{
$(_list).slideUp("fast");
}
});
$("#city-list li").bind("click",function(){
$("input#input_city").val(this.innerHTML);
$("a").click();
});
</script>
</body>
</html>