减小字体
增大字体- ·上一篇站长学习：百度Hi如何杀出重围
- ·下一篇站长学习：规范化的HTML代码有利于搜索引擎排名
Css：制作一个更漂亮一些的多选列表框
我认为多选列表具有完美的功能——只需按下Ctrl键，同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框： Www~71code~com
选出你最喜爱的快餐： 71站长源码
| 以下为引用的内容： <form method="get" action=""> 71code_com <b>Check your favorite fast food:</b><br/> 71站长源码 <SELECT MULTIPLE SIZE=5 name="favorites"> 71站长源码 <OPTION VALUE="McDonalds">McDonald's</option> 71站长源码 <OPTION VALUE="BurgerKing">Burger King</option> 71code@com <OPTION VALUE="Wendys">Wendy's</option> 71站长源码 <OPTION VALUE="JackInTheBox">Jack in the Box</option> Www@71code@com <OPTION VALUE="KFC">KFC</option> 71站长源码 <OPTION VALUE="TacoBell">Taco Bell</option> 中国71站长源码 </SELECT> 71站长源码 <br/><input type="submit" value="Choose"> Www.71code.com </form> 71code~com |
事实上，即使你在页面中添加了用法说明，仍然有用户不知道如何使用多选列表框。另外，给每个项目增加额外的标题确实会有帮助，但用一个普通的多选列表框能否达到那个目的，我还不能确定。 71站长源码
不过，我确实清楚知道，用一些CSS和一小段JavaScript，你就能生成一个更漂亮一点的多选列表框，并且还可以建立一个等同于普通多选列表框的URL。那样，你就不用修改处理列表框的后端代码——而只需要美化前端即可。
Www@71code@com
你首先从CSS开始，建立一个新多选列表框在其中滚动的小区域。我们还可以建立悬浮效果，当鼠标移动到一个项目上时，背景色就会改变，以突出当前选择。 Www@71code@com
| 以下为引用的内容： <style> 71站长源码 .checklist { [71站长源码] border: 1px solid #ccc; 71code.com list-style: none; 71code.com height: 10em; 71code.com overflow: auto; 71code.com width: 20em; 71code }.checklist, .checklist li { margin: 0; padding: 0; } 71站长源码 .checklist label { 71站长源码 display: block; Www~71code~com padding: 0 0.2em 0 25px; 71站长源码 text-indent: -25px; 71code~com } 71code~com .checklist label:hover { background: #777; color: #fff; } 71站长源码 * html .checklist label { height: 1%; } 71站长源码 </style> 71站长源码 |
至于JavaScript，你基本上只希望建立一个等同于常规多选列表框的URL。以上面的多选列表框为例，其查询字符串如下： 71code_com
?favorites=Wendys&favorites=KFC Www~71code~com
那就是我们希望仿效的地方。这段脚本只是利用外观(form)对象，循环所有检验栏(checkbox)的thru looking，并为那些选中的项目建立URL。很明显，这段脚本只应用于所有检验栏元素都位于新多选列表框的情况。 Www~71code~com
| 以下为引用的内容： <script type="text/javascript"> 71站长源码 function submitForm(f) { 71code^com var cb = f.getElementsByTagName("input"); 71code~com var favorites = "favorites="; 71站长源码 var isFirst = true;for (var i = 0; i < cb.length; i++) { 中国71站长源码 var curr = cb[i]; 71站长源码,为中文网站提供动力 if (curr.type == "checkbox") { Www~71code~com // window.alert(curr.name + ": " + curr.type); 71code.com if (curr.checked) { 71站长源码 if (isFirst) { 71站长源码 favorites = "favorites=" + curr.name; 71站长源码 isFirst = false; 71站长源码 } else { 71code.com favorites = favorites + "&favorites=" + curr.name; Www~71code~com } Www@71code@com } Www@71code@com } 71code~com } Www^71code^com window.location = f.action + "?" + favorites; 71code~com } 71code@com </script> Www^71code^com |
71站长源码
最后，经过简单改进的新多选列表框的代码如下： Www_71code_com
| 以下为引用的内容： <form method="get" action=""> 71code^com <b>Check your favorite fast food:</b><br/> 71站长源码 <ul class="checklist"> 71站长源码 <li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I'm lovin' it</label></li> 71站长源码 <li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li> 71站长源码 <li><label><input type="checkbox" name="Wendys" /><b>Wendy's</b><br/>Always fresh, never frozen</label></li> 71站长源码,为中文网站提供动力 <li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn't get all over the place, it doesn't belong in your face</label></li> 71code~com <li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin' good</label></li> 71站长源码 <li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li> 71code^com </ul> 71站长源码 <input type="button" value="Choose" onclick="submitForm(this.form);"> 71code@com </form> 71code~com |
71站长源码
不幸的是，TechRepublic网站大量应用CSS，因此当我在博客中试用这段样本代码时，它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明
