您的位置：首页 > Web前端 > JavaScript

【转】用javascript实现select的美化

2007-04-30 12:14 513 查看

作者的blog：http://www.iwcn.net

论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。
先可以看一下预览效果：http://www.iwcn.net/demo/select

功能需求

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中添加了调用函数的脚本。

运行代码框

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta http-equiv="Content-Language" content="zh-CN" />
6 <title>用javascript美化Select</title>
7 <script type="text/javascript" src="select.js"></script>
8</style>
11 </head>
12 <body>
13 <h1>用javascript模拟select达到美化效果</h1>
14<form name="f" onsubmit="getResult();">
15 <fieldset>
16 <legend>用户注册</legend>
17 <div>
18 <label for="username">帐号</label>
19 <input type="text" id="username" name="username" />
20 </div>
21 <div>
22 <label for="pwd">密码</label>
23 <input type="password" name="pwd" id="pwd" />
24 </div>
25 <div>
26 <label for="province">省份</label>
27 <select id="province" name="province">
28 <option value="10">江西</option>
29 <option value="11">福建</option>
30 <option value="12">广东</option>
31 <option value="13">浙江</option>
32 </select>
33 </div>
34 </fieldset>
35 <input type="submit" value="提交" name="btnSub" />
36</form>
37 <p>
41 <a href="http://www.iwcn.net">作者博客</a>
42 </p>
43 </body>
44</html>
编写javascript

<script type="text/javascript" src="select.js"></script>

新建一个js文件并保存为select.js，剩下的工作我们全部在这个js中去完成。

函数名：loadSelect(obj);
参数：select对象

相关函数：

//取标签的绝对位置

var iDiv = document.createElement("div");
2 iDiv.id="selectof" + obj.name;
3 iDiv.style.position = "absolute";
4 iDiv.style.width=offset.width + "px";
5 iDiv.style.height=offset.height + "px";
6 iDiv.style.top=offset.top + "px";
7 iDiv.style.left=offset.left + "px";
8 iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
9 iDiv.style.border="1px solid #3366ff";
10 iDiv.style.fontSize="12px";
11 iDiv.style.lineHeight=offset.height + "px";
12 iDiv.style.textIndent="4px";
13 document.body.appendChild(iDiv);

第四步：把原始select没人选中的值给它。

1iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;

第五步：为替身添加鼠标移过样式。

<div>
2 <ul>
3 <li>optionName</li>
4 <li>optionName</li>
5 <li>optionName</li>
6 </ul>
7</div>

基本上就这样了。还有些缺陷，有时间大家可以一起补充！

经典论坛讨论：
http://bbs.blueidea.com/thread-2741431-1-1.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航