select标签的美化及js模拟解决方案

snoopy7713

浏览: 1152579 次
性别:
来自: 火星郊区

最近访客更多访客>>

青木落扬

jccz_zys

msn877763580

yushi103

博主相关

博客

微博

相册

留言

关于我

博客专栏

: OSGi
浏览量：0

文章分类

社区版块

存档分类

博客分类：

JQuery

select美化 select高度设置 select模拟

所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是：

不同的浏览器显示的默认下拉框样子不完全相同
IE下无法手动设置select的高度（这是最坑爹的！），只能靠font-size撑起来
select右侧的下拉箭头是无法使用背景消除的，这就导致无法使用css进行美化

总结起来，解决办法主要有：

将select隐藏掉，而使用div进行模拟
将select透明度设置为0，然后使用相对定位在下方加一个长得很像select又美化了的div

隐藏方案一般原理如下：

找到页面需要处理的select，将其隐藏
根据select的option，创建一个li列表（当然也可以是div），并隐藏。
在select的位置创建一个div，显示select的值（selected的option）。并使用css对其进行美化，使其看起来像一个select
添加事件，使点击“select”的时候，显示li列表。并使用相对定位，让这个列表显示在“select”下方
对li列表添加事件，模拟下拉框的选值过程（点击事件和键盘↑↓事件都要模拟）
选值完成后，要将选的值显示到上方的“select”，并设置真正的select的值

当然，如果你想做的更复杂点，还可以添加选项搜索、多选、多选后的选项删除等。当时一般原理都跟上面差不多。网上也有很多这样的插件。但使用网上的插件要注意测试浏览器的兼容性，功能越复杂的模拟select，兼容性越不好做

如果，你的程序不需要那么复杂的select，那么设置透明度的第二种方案也许适合你。今天要分享给大家的也是这个方案。

它的原理如下：

找到当前页面的select，将其透明度设置为0.使其看不见，但是可以点击并选值
创建一个div，使用相对定位，放置到select下方，并通过css控制使其看起来像一个select。为什么一定要放在下方呢？因为这样，我们可以点击真正的select，而用户看起来像是点击的这个模拟的select，因为真正的select是完全透明的。如果放置在上方，则用户点击的是这个模拟的select，真正的select不会展开！！！
设置div的text为select的值
添加事件，使真正的select选值后，将值显示到模拟的div上

先上代码吧：

Js代码

( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制使用Jquery设置透明度可以屏蔽透明度的浏览器兼容性问题
$(select).css({
"opacity" :0
});
//找到select的选项
var sOptions= this .get(0).options;
//设置模拟select的值
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
//模拟的select
//初始化时要将select的值传入
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var left=$(select).offset().left;
var top=$(select).offset().top-1; //因为一般select都有1px的边框，所以这里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select选值时，将值显示到模拟的select上
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);

(function($){
	var selectFix=function(){
		var select=$(this);
		//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
		$(select).css({
			"opacity":0
		});
		//找到select的选项
		var sOptions=this.get(0).options;
		//设置模拟select的值
		var setFixDivText=function(selectValue){
			var text="";
			for(var i=0;i<sOptions.length;i++){
				var option=sOptions[i];
				if(option.value==selectValue){
					text=$(option).text();
					break;
				}
			}
			return text;
		};

		//模拟的select
		//初始化时要将select的值传入
		var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>');
		select.after(selectFixDiv);

		var left=$(select).offset().left;
		var top=$(select).offset().top-1;//因为一般select都有1px的边框，所以这里往上拉1px
		$(selectFixDiv).css({
			"top" : top,
			"left" : left
		});
		
		//select选值时，将值显示到模拟的select上
		$(select).bind("change click",function(){
			$(selectFixDiv).text(setFixDivText($(this).val()));
		});
	};
	$.fn.selectFix=selectFix;
})(jQuery);

插件代码运行：

Js代码

jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
$( this ).selectFix();
});
}
});

jQuery(document).ready(function() {
	var selects=$("select.selectInput");
	if(selects.length){
		selects.each(function(){
			$(this).selectFix();
		});
	}
});

下面是html代码：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME = "Generator" CONTENT = "EditPlus" >
< META NAME = "Author" CONTENT = "" >
< META NAME = "Keywords" CONTENT = "" >
< META NAME = "Description" CONTENT = "" >
< script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script >
< script type = text /javascript src = "temp.js" > </ script >
< style >
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
</ style >
</ HEAD >
< BODY >
< div id = "main" >
< select id = "sex" class = "selectInput" name = "sex" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >
</ div >
</ BODY >
</ HTML >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
 <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 <script type=text/javascript src="temp.js"></script>

 <style>
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
 </style>
</HEAD>

<BODY>
<div id="main">
	<select id="sex" class="selectInput" name="sex">
		<option value="0">男</option>
		<option value="1">女</option>
    </select>
</div>
</BODY>
</HTML>

运行效果如下：

展开前

展开后

兼容主流浏览器。

但也还是有个重大的缺陷，在老版本的ie中，真正select的高度还是无法撑开。所以，用户点击模拟的select的靠下方的位置会发现select无法展开！！

不过设计的艺术在于平衡，如果你无法忍受这个缺陷，可以使用第一种解决方案。

另外，在测试后，发现如果select处于一个隐藏的容器中，那么显示后，select的位置是一个空白！！

这是怎么回事呢？！

原来，html元素隐藏后是无法获取他的屏幕坐标的！！！所以这时候显示出来，真正的select完全透明了，而模拟的select跑到屏幕的左上角去了。因为他获取select的坐标为（0,0）

不要着急，这个问题有下面的解决办法：

1、单独写代码触发select的美化程序

首先，你需要将上面的美化程序运行代码做以下修改：

Js代码

jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
if (!($( this ).attr( "autoFix" )== "false" )){
$( this ).selectFix();
}
});
}
});

jQuery(document).ready(function() {
	var selects=$("select.selectInput");
	if(selects.length){
		selects.each(function(){
			if(!($(this).attr("autoFix")=="false")){
				$(this).selectFix();
			}
		});
	}
});

然后，在隐藏的select上加属性autoFix="false"：

Html代码

< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >

<select id="sex" class="selectInput" name="sex" autoFix="false">
		<option value="0">男</option>
		<option value="1">女</option>
    </select>

然后，在外部容器显示的时候，手动调用$("#sex").selectFix()

2、如果容器的显示或者隐藏是第三方插件控制，修改不方便可考虑下面的方案：

在美化程序中，先判断select是否隐藏，如果否逻辑不变，如果隐藏，则加入一个timer，循环判断元素是否被显示，在其显示的时候再自动调用fix，然后将timer移除

代码如下：

Js代码

//加上隐藏select的操作
( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制使用Jquery设置透明度可以屏蔽透明度的浏览器兼容性问题
$(select).css({
"opacity" :0
});
if (!select.is( ":hidden" )){
var sOptions= this .get(0).options;
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var selectWidth=$(select).innerWidth();
var selectFixDivWidth=$(selectFixDiv).innerWidth();
var left=$(select).offset().left;
var top=$(select).offset().top-1;
$(selectFixDiv).css({
"top" : top,
"left" : left,
"margin" : 0
});
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
} else {
var tasks = function (){
if (!$(select).is( ":hidden" )){
$(select).selectFix();
clearInterval(timer);
}
};
var timer=setInterval(tasks,500)
}
};
$.fn.selectFix=selectFix;
})(jQuery);

//加上隐藏select的操作
(function($){
	var selectFix=function(){
		var select=$(this);
		//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
		$(select).css({
			"opacity":0
		});

		if(!select.is(":hidden")){
			var sOptions=this.get(0).options;

			var setFixDivText=function(selectValue){
				var text="";
				for(var i=0;i<sOptions.length;i++){
					var option=sOptions[i];
					if(option.value==selectValue){
						text=$(option).text();
						break;
					}
				}
				return text;
			};

			var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>');
			select.after(selectFixDiv);

			var selectWidth=$(select).innerWidth();
			var selectFixDivWidth=$(selectFixDiv).innerWidth();
			var left=$(select).offset().left;

			var top=$(select).offset().top-1;
			$(selectFixDiv).css({
				"top" : top,
				"left" : left,
				"margin" : 0
			});

			$(select).bind("change click",function(){
				$(selectFixDiv).text(setFixDivText($(this).val()));
			});
		}else{
			var tasks = function(){
				if(!$(select).is(":hidden")){
					$(select).selectFix();
					clearInterval(timer);
				}
			};
			var timer=setInterval(tasks,500)
		}
	};
	$.fn.selectFix=selectFix;
})(jQuery);

运行代码跟原来的不变。

附件js为最终版。

selectFix.rar (31 KB)
下载次数: 1

分享到：

Jquery 将表单序列化为Json对象 | 关于如何绑定Jquery 的scroll事件（兼容浏 ...

2012-11-07 08:23
浏览 1348
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论