Chinaz.com - 中国站长站

匿名投稿 投稿指南 RSS订阅 站长资讯通告:
搜索: 您的位置主页>设计在线>WEB标准>阅读资讯:用Css来制作一个更漂亮一些的多选列表框

用Css来制作一个更漂亮一些的多选列表框

2008-05-29 09:40:49 来源:好了 作者:编辑整理 【 评论:1

你首先从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>

Tags:CSS   多选列表框   css相关技术文章   css相关技术文档  
责任编辑:远行客
  • 请文明参与讨论,禁止漫骂攻击。 用户名:新注册) 密码: 匿名:
    评论总数: [ 查看全部 ] 网友评论
    关于我们 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助