这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了用 JavaScript 来美化 HTML 的 select 标签的下拉列表效果的方法, 而且在多浏览器下的兼容效果也得到提升, 需要的朋友可以参考下
首先通过一个例子来回顾一下 select 标签的用法:
- <html>
- <body>
- <form>
- <select name="cars">
- <option value="volvo">
- Volvo
- </option>
- <option value="saab">
- Saab
- </option>
- <option value="fiat">
- Fiat
- </option>
- <option value="audi">
- Audi
- </option>
- </select>
- </form>
- </body>
- </html>
然后效果一般时这样的:
美与丑暂且不论... 所有 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 上 先上代码吧:
- ( 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);
插件代码运行:
- 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 代码:
- <!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=t ext /javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
- </ script>
- < script type=t ext /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 的美化程序 首先,你需要将上面的美化程序运行代码做以下修改:
- 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":
- < 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 移除 代码如下:
- //加上隐藏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);
运行代码跟原来的不变。
来源: http://www.phperz.com/article/17/0408/268676.html