用javascript实现select的美化
作者:jxdawei 来源:蓝色经典 发布时间:2007-05-11 16:50:00
标签:select,美化,javascript
论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下,基本实现的初级功能。拿出来和大家一起分享一下。
先可以看一下: 预览效果
功能需求
1、调用要方便,做好之后应该像这样:
function loadSelect(selectobj){
//传入一个select对象就能将他的样式美化
}
2、不改变原有表单项,表单的页面代码不去破坏:
<form name="f" onsubmit="getResult();">
<fieldset>
<legend>用户注册</legend>
<div>
<label for="username">帐号</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">省份</label>
<select id="province" name="province">
<option value="10">江西</option>
<option value="11">福建</option>
<option value="12">广东</option>
<option value="13">浙江</option>
</select>
</div>
</fieldset>
<input type="submit" value="提交" name="btnSub" />
</form>
实现思路
第一步:将表单中的select隐藏起来。
为什么?很简单,因为这家伙太顽固了,用css根本搞不出来你想要的。所以把它杀掉。第二步:用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。第三步:用脚本把select标签中的值读出来。
虽然藏起来了,但它里边的options我们还有用呢,统统取过来。第四步:当用户点击select标签的替身,也就是div的时候。我们再用一个div浮在上一个div的下边,这个就是options的替身了。
大致上就是这样了,接下来我们一步一步去实现它!
准备工作
1、想好你要把select美化成什么样子,并准备好相应的图片。我准备了两张小图,就是下拉箭头1和下拉箭头2,1是默认样式,2是鼠标移过来的样式。
2、写好一个普通的表单递交页面,比如下边这个。注意我给select定义了基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。
运行代码框
0
投稿
猜你喜欢
- 可能许多同学对SQL Server的备份和还原有一些了解,也可能经常使用备份和还原功能,我相信除DBA之外我们大部分开发员队伍对备份和还原只
- 说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 bo
- 项目说明开发php项目管理系统,由于是新项目且已经部署在生产环境,导致需要根据实际使用情况,进行及时的功能升级或bug修复。每次升级,进行程
- 英文原文:The seven rules of Unobtrusive JavaScript原文地址:http://icant.co.uk/
- 找到一句可以获得当前最新ID的语句,如下:conn.execute("insert into member (user,code)
- 1. ASCII 返回与指定的字符对应的十进制数; SQL> select ascii(A) A,ascii(a) a,ascii(0
- SQL Server数据库涉及到的数据仓库概念:1.多维数据集:多维数据集是联机分析处理 (OLAP) 中的主要对象,是一项可对数据仓库中的
- 一. 建库,建表,加约束. 1.1建库 代码如下:use master go if exists (select * from sysdat
- 本文介绍了用ASP的AdoDb.Stream读取/写入UTF-8编码格式的文件的方法:函数名称:ReadTextFile 作用:利用AdoD
- 无意中看到以前在电脑上保存的一个html页面,关于div水平垂直居中的问题。如何实现div水平垂直居中呢?1.已知宽高度水平垂直居中posi
- 【原文地址】New C# "Orcas" Language Features: Automatic Properties
- 管理SQL Server内在的帐户和密码时,我们很容易认为这一切都相当的安全。但实际上并非如此。在这里,我们列出了一些对于SQL Serve
- 为了更好的说明问题,首先引出下面的题目//请说明下面变量 a-d 的值 var a = [[1][1]]; var b = [['a
- Macromedia StandardMacromedia Dreamweaver MXMenu Commandsphotoshop快捷键大
- 性能首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难
- 我们可能会出现这种情况,某个表原来设计不周全,导致表里面的数据数据重复,那么,如何对重复的数据进行删除呢?重复的数据可能有这样两种情况,第一
- 作用域链(Scope Chain)JavaScript中的一种重要机制,JS中所有的标识符(Identifier)都是通过Scope Cha
- 一个ASPJPEG组件综合操作的asp类CLASS相关文章:ASP怎么谈到应用到类的?ASP中类的详细介绍(class Property G
- 具体特征如下: 1、通过模板实现俄文正常。 2、通过后台数据库生成的静态俄文信息,后台显示正常, 前台乱码。 3、英文正常。 和该主题相关的
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 2 - Selectors如果你还没有准备好,请先