<html>
<head> 选择器实现
<style type="text/css">
#words_list{position: absolute;right: 0;top: 0;width: 20px;}
#words_list div{font-size: 12px;line-height: 14px;text-align: center;}
#words_show{display:none;width:38px;height:38px;font-size:26px;position:absolute;left: 0px;top:0px;right:0px;bottom: 0px;margin:auto;border-radius:100%;background-color:#ddd;opacity:0.5;text-align:center;line-height:38px;}
</style>
<!--<script src="selector.js" type="text/javascript" ></script>-->
</head>
<body>
<div id="list">
<ul>
<li><a>全部</a></li>
<li><a>热门</a></li>
<span class="letter">A</span>
<li><a>奥迪</a></li>
<li><a>奥巴马</a></li>
<span class="letter">B</span>
<li><a>宝马</a></li>
<li><a>宝来</a></li>
</ul>
<div id="letter_list"></div>
<div id="bigLetter"></div>
</div>
<div >
<span style="display:block" >
hello
</span>
<span >
world
</span>
</div>
<div>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<select name="cars">
<option value="fiat" selected>HHH</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="Submit">
</form>
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
</div>
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<script type="text/javascript">
/**
* @param letter 字母选择器
* @param letterList 字母容器选择器
* @param PanContainer Pan选择器
* @param bigLetter 大字母选择器
*/
//alert("-------");
/*LetterIndex({
letter:"#list .letter",
letterList:"#letter_list",
PanContainer:"#list",
bigLetter:"#bigLetter"
});
*/
</script>
</body>
</html>
相关文章：