用Css来制作一个漂亮的多选列表框
作者:好了 时间:2008-05-29 12:45:00
我认为多选列表具有完美的功能——只需按下Ctrl键,同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框:
上面那个列表框的代码如下:
<form method="get" action="">
<b>Check your favorite fast food:</b><br/>
<SELECT MULTIPLE SIZE=5 name="favorites">
<OPTION VALUE="McDonalds">McDonald's</option>
<OPTION VALUE="BurgerKing">Burger King</option>
<OPTION VALUE="Wendys">Wendy's</option>
<OPTION VALUE="JackInTheBox">Jack in the Box</option>
<OPTION VALUE="KFC">KFC</option>
<OPTION VALUE="TacoBell">Taco Bell</option>
</SELECT>
<br/><input type="submit" value="Choose">
</form>
事实上,即使你在页面中添加了用法说明,仍然有用户不知道如何使用多选列表框。另外,给每个项目增加额外的标题确实会有帮助,但用一个普通的多选列表框能否达到那个目的,我还不能确定。
不过,我确实清楚知道,用一些CSS和一小段JavaScript,你就能生成一个更漂亮一点的多选列表框,并且还可以建立一个等同于普通多选列表框的URL。那样,你就不用修改处理列表框的后端代码——而只需要美化前端即可。
你首先从CSS开始,建立一个新多选列表框在其中滚动的小区域。我们还可以建立悬浮效果,当鼠标移动到一个项目上时,背景色就会改变,以突出当前选择。
<style>
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 10em;
overflow: auto;
width: 20em;
}.checklist, .checklist li { margin: 0; padding: 0; }
.checklist label {
display: block;
padding: 0 0.2em 0 25px;
text-indent: -25px;
}
.checklist label:hover { background: #777; color: #fff; }
* html .checklist label { height: 1%; }
</style>
至于JavaScript,你基本上只希望建立一个等同于常规多选列表框的URL。以上面的多选列表框为例,其查询字符串如下:
?favorites=Wendys&favorites=KFC
那就是我们希望仿效的地方。这段脚本只是利用外观(form)对象,循环所有检验栏(checkbox)的thru looking,并为那些选中的项目建立URL。很明显,这段脚本只应用于所有检验栏元素都位于新多选列表框的情况。
<script type="text/javascript">
function submitForm(f) {
var cb = f.getElementsByTagName("input");
var favorites = "favorites=";
var isFirst = true;for (var i = 0; i < cb.length; i++) {
var curr = cb[i];
if (curr.type == "checkbox") {
// window.alert(curr.name + ": " + curr.type);
if (curr.checked) {
if (isFirst) {
favorites = "favorites=" + curr.name;
isFirst = false;
} else {
favorites = favorites + "&favorites=" + curr.name;
}
}
}
}
window.location = f.action + "?" + favorites;
}
</script>
最后,经过简单改进的新多选列表框的代码如下:
<form method="get" action="">
<b>Check your favorite fast food:</b><br/>
<ul class="checklist">
<li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I'm lovin' it</label></li>
<li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li>
<li><label><input type="checkbox" name="Wendys" /><b>Wendy's</b><br/>Always fresh, never frozen</label></li>
<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>
<li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin' good</label></li>
<li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li>
</ul>
<input type="button" value="Choose" onclick="submitForm(this.form);">
</form>
不幸的是,TechRepublic网站大量应用CSS,因此当我在博客中试用这段样本代码时,它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明其中的基本理论。
因此,我在自己的个人网站上用这段代码发布了一个简单的文件,你可以通过它了解代码的用法。
标签:多选,列表,css
0
投稿
猜你喜欢
Python利用openpyxl库遍历Sheet的实例
2023-10-20 20:19:01
python三元运算符实现方法
2022-08-19 23:11:34
SQL Server数据库中的表名称、字段比较
2024-01-13 17:02:24
jquery 使用点滴函数代码
2011-05-21 16:12:00
使用Pycharm+PyQt5弹出子窗口的程序代码
2022-03-09 20:15:17
分别使用vue和Android实现长按券码复制功能
2023-10-29 23:20:11
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2023-01-23 01:59:51
如何取得表中字段的属性?
2010-01-18 20:52:00
MySQL插入emoji表情失败问题的解决方法
2024-01-24 05:26:05
IE地址栏显示网站图标制作方法
2007-10-13 11:08:00
MVC4制作网站教程第二章 用户注册2.1
2023-06-28 12:33:36
python中的annotate函数使用
2021-04-10 01:52:59
mysql表名忽略大小写配置方法详解
2024-01-24 11:49:19
Python读取properties配置文件操作示例
2021-06-10 04:20:55
如何基于Python实现数字类型转换
2023-10-08 00:57:13
解决Python图形界面中设置尺寸的问题
2022-11-12 12:05:02
Zend Framework动作助手Redirector用法实例详解
2024-05-13 09:53:15
javascript设置和获取cookie的方法实例详解
2024-04-22 13:05:08
浅谈Django中的QueryDict元素为数组的坑
2023-08-22 18:55:54
SQL语句实现删除重复记录并只保留一条
2024-01-13 21:19:23