Css:制作一个更漂亮一些的多选列表框 - CSS - 网页制作 - 站长资讯 - 一摘网站分类目录-免费收录各类优秀网站的中文网站目录
当前位置:一摘网站分类目录 > 首页 > 资讯首页 > 网页制作 > CSS > Css:制作一个更漂亮一些的多选列表框

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

发表时间:2011-07-05内容来源:中国目录网整理  [我要投稿]  [免费提交网站]  转发微博:

  

我认为多选列表具有完美的功能——只需按下Ctrl键,同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框:

选出你最喜爱的快餐:
Css:制作一个更漂亮一些的多选列表框

上面那个列表框的代码如下:

<form method="get" action="">

<b>Check your favorite fast food:</b><br/>

<SELECT MULTIPLE SIZE=5 name="favorites">

<OPTION VALUE=http://www.chinahtml.com/0709/"McDonalds">McDonald's</option>

<OPTION VALUE=http://www.chinahtml.com/0709/"BurgerKing">Burger King</option>

<OPTION VALUE=http://www.chinahtml.com/0709/"Wendys">Wendy's</option>

<OPTION VALUE=http://www.chinahtml.com/0709/"JackInTheBox">Jack in the Box</option>

<OPTION VALUE=http://www.chinahtml.com/0709/"KFC">KFC</option>

<OPTION VALUE=http://www.chinahtml.com/0709/"TacoBell">Taco Bell</option>

</SELECT>

<br/><input type="submit" value=http://www.chinahtml.com/0709/"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=http://www.chinahtml.com/0709/"Choose" onclick="submitForm(this.form);">

</form>

不幸的是,TechRepublic网站大量应用CSS,因此当我在博客中试用这段样本代码时,它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明其中的基本理论。

因此,我在自己的个人网站上用这段代码发布了一个简单的文件,你可以通过它了解代码的用法。

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
128
最新推荐                    我也要出现在这里 | 更多
快速链接
最新快速审核
动态图片基地每日最搞笑的gif动态图片大全与您共分享,网罗当下最热门的微信图片表
www.asqql.com
中国数字期刊网(www.shiziqikan.com)是提供论文发表、期刊合作、
www.shuziqikan.com
71读小说网是广大书友最值得收藏的网络小说阅读网,网站收录了当前最火最热的网络小
www.71du.com
大香蕉网是专业发放淘宝优惠券天猫超市优惠券的优惠券网站,每天数万种淘宝内部优惠券
www.daxiangjiao1234.com
读客吧汇聚经典原创小说,致力于打造最好最完善的免费网络小说阅读网,网站收录了当前
www.dukeba.com
ADS 广告位招租
一摘开放式网站目录
在线投稿提交网站关于我们帮助中心 广告赞助免责声明 隐私保护最新推荐友情连接意见反馈
Copyright © 2006-2011 一摘网络 版权所有  1zhai.com  All Rights Reserved
在线投稿,网站免费登录,新收录网站首页显示,所有排名全自动实时刷更新,网站推广的最佳选择就在一摘开放式网站目录
Powered by 一摘网络(1zhai.com)    快速审核|投放广告,请点击给我信息快速审核|投放广告
页面执行时间: 124 毫秒