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

更新时间:2021-12-17
浏览次数:2

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


选出你最喜爱的快餐:

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

Check your favorite fast food:




事实上,即使你在页面中添加了用法说明,仍然有用户不知道如何使用多选列表框。另外,给每个项目增加额外的标题确实会有帮助,但用一个普通的多选列表框能否达到那个目的,我还不能确定。

不过,我确实清楚知道,用一些CSS和一小段JavaScript,你就能生成一个更漂亮一点的多选列表框,并且还可以建立一个等同于普通多选列表框的URL。那样,你就不用修改处理列表框的后端代码——而只需要美化前端即可。

你首先从CSS开始,建立一个新多选列表框在其中滚动的小区域。我们还可以建立悬浮效果,当鼠标移动到一个项目上时,背景色就会改变,以突出当前选择。

至于JavaScript,你基本上只希望建立一个等同于常规多选列表框的URL。以上面的多选列表框为例,其查询字符串如下:


?favorites=Wendys&favorites=KFC

那就是我们希望仿效的地方。这段脚本只是利用外观(form)对象,循环所有检验栏(checkbox)的thru looking,并为那些选中的项目建立URL。很明显,这段脚本只应用于所有检验栏元素都位于新多选列表框的情况。

最后,经过简单改进的新多选列表框的代码如下:

Check your favorite fast food:



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

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

最新发布
网站定位方法
重组汽车管理系统
初探温湿度监控系统
汽车派遣小程序增加用车单撤销
中文加密解密的BASE64的类
Window.Open详解
企业网站防止网页病毒和木马技巧
车辆派车小程序基础版发布
利用MySQL加密函数保护Web网站的敏感数据
网站建立链接的策略
热门阅读
单位车辆管理系统解决方案

2022年汽车维修管理系统免费V1.0试用

免费汽车维修管理系统,配件出入库管理,维修单据录入和打印,客户管理,财务管理

车辆派车小程序基础版发布

打开手机微信小程序搜索“派车堂”或扫太阳码码进入小程序

保存到数据库前替换空格/回车

在没使用框架的小项目中,很多函数需要自己处理。数据入库部分是很重要的一环,防止SQL注入要过滤很多字符。 If Not IsNull(fString) Then fString = trim(fString) 'fString = replace(fString, ";", ";") '分号过滤 fString = replace(fString, "--", "——") '--过滤 fString = replace(fString, "%20", "") '特殊字符过滤 fString = replace(fString, "==", "") '==过滤 'fString = replace(fString, ">", ">") 'fString = replace(fString, "<", "<") fString = Replace(fString, CHR(32), " ") ' fString = Replace(fString, CHR(9), " ") ' fString = Replace(fString, CHR(34), """) fString = Replace(fString, CHR(39), "'") '单引号过滤 fString = Replace(fString, CHR(13), "") fString = Replace(fString, CHR(10) & CHR(10), "</P><P>") fString = Replace(fString, CHR(10), "<BR>") changechr = fString End If End Function

工厂生产订单管理系统

电脑,微信小程序都能访问,系统支持自动核算成本,业绩统计,订单拆分下单

车辆维修(汽修)系统使用手册

汽车维修子系统使用手册说明文档

sqlserver重置自增ID列从1开始

在测试程序过程中删除数据,表需要重置自增ID列从1开始

供应链(报单)订单管理系统V1上线

支持电脑下单,手机小程序下单,订单持久化保存在服务器不丢失,报单分单给不同供货商,数据图形化统计,数据导出,微信扫码分享订单详情

网站定位方法

有句话说的好,“优势在全面中平庸,在多余中丧失”。我们看到太多站长的自述,开始做站时求大、求全。因为是个人在做,毕竟再难以成为一个门户,所以最后一个人忙得焦头烂额,身心疲惫。想什么也做,只是什么也做不成。

汽车派遣小程序增加用车单撤销

此时由于申请单处于待审批状态,车辆锁住中,其他人员不能申请该辆车,造成时间上的浪费。

微信扫以下二维码添加好友咨询