- 浏览: 1146988 次
- 性别:
- 来自: 火星郊区
博客专栏
-
OSGi
浏览量:0
文章分类
- 全部博客 (695)
- 项目管理 (48)
- OSGi (122)
- java (79)
- Vaadin (5)
- RAP (47)
- mysql (40)
- Maven (22)
- SVN (8)
- 孔雀鱼 (10)
- hibernate (9)
- spring (10)
- css (3)
- 年审 (6)
- ant (1)
- jdbc (3)
- FusionCharts (2)
- struts (4)
- 决策分析 (2)
- 生活 (10)
- 架构设计 (5)
- 破解 (2)
- 狼文化 (4)
- JVM (14)
- J2EE (1)
- 应用服务器 (1)
- 我的链接 (5)
- 数学 (2)
- 报表 (1)
- 百科 (6)
- Flex (7)
- log4j (2)
- PHP (1)
- 系统 (2)
- Web前端 (7)
- linux (6)
- Office (1)
- 安全管理 (5)
- python (2)
- dom4j (1)
- 工作流 (3)
- 养生保健 (4)
- Eclipse (8)
- 监控开发 (1)
- 设计 (3)
- CAS (1)
- ZK (41)
- BluePrint (3)
- 工具 (1)
- SWT (7)
- google (2)
- NIO (1)
- 企业文化 (2)
- Windoes (0)
- RCP (7)
- JavaScript (10)
- UML (1)
- 产品经理 (2)
- Velocity (10)
- C (1)
- 单元测试 (1)
- 设计模式 (2)
- 系统分析师 (2)
- 架构 (4)
- 面试 (2)
- 代码走查 (1)
- MongoDB (1)
- 企业流程优化 (1)
- 模式 (1)
- EJB (1)
- Jetty (1)
- Git (13)
- IPV6 (1)
- JQuery (8)
- SSH (1)
- mybatis (10)
- SiteMesh (2)
- JSTL (1)
- veloctiy (1)
- Spring MVC (1)
- struts2 (3)
- Servlet (1)
- 权限管理 (1)
- Java Mina (1)
- java 系统信息 (6)
- OSGi 基础 (3)
- html (1)
- spring--security (6)
- HTML5 (1)
- java爬虫搜索 (1)
- mvc (3)
最新评论
-
Tom.X:
http://osgia.com/
将web容器置于OSGi框架下进行web应用的开发 -
chenyuguxing:
你好, 为什么我的bundle export到felix工程中 ...
在Apache Felix中运行bundle -
string2020:
<niceManifest>true</ni ...
Bundle Plugin for Maven -
jsonmong:
OSGI,是未来的主流,目前已相当成熟。应用OSGI比较好的, ...
基于OSGi的声明式服务 -
zyhui98:
貌似是翻译过来的,有很少人在linux上做开发吧
如何成为“10倍效率”开发者
所有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 = 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的美化程序
首先,你需要将上面的美化程序运行代码做以下修改:
- 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);
运行代码跟原来的不变。
附件js为最终版。
- selectFix.rar (31 KB)
- 下载次数: 1
发表评论
-
关于如何绑定Jquery 的scroll事件(兼容浏览器)
2012-11-07 08:23 2143今天做一个随屏幕滚动的导航条时,发现一个问题: 火狐、谷歌、 ... -
Jquery 将表单序列化为Json对象
2012-11-07 08:23 31568大家知道Jquery中有serialize方法,可以将表单序列 ... -
javascript “||”、“&&”的灵活运用
2012-11-06 08:22 1021你是否看到过这样的代码:a=a||""; ... -
Jquery error 事件
2012-11-06 08:21 1160error 通常用来处理图像无法加载的错误。$(" ... -
如何为javascript方法参数设置默认值
2012-11-06 08:21 1044你是否遇到过这样的情况,写了个function,无参数。 ... -
看了这个才发现jQuery源代码不是那么晦涩
2012-11-06 08:20 1506很多人觉得jquery、ext等一些开源js源代码 十分的晦涩 ... -
推荐40个精心挑选的功能强大的jQuery导航插件
2012-08-23 09:22 1142推荐40个精心挑选的功能强大的jQuery导航插件 ...
相关推荐
本项目名为"SELECT下拉菜单美化",旨在提供一套优雅的解决方案,让`SELECT`下拉菜单在保持功能完整性的前提下,外观更加精致。这个美化方案特别适用于语言切换或网站主题色调选择等场景,让用户在选择过程中感受到...
标签“SELECT 模拟 美化 美化模拟SELECT”进一步明确了讨论的主题。"SELECT"是SQL语言中的一个关键字,用于从数据库中选取数据;"模拟"意味着创建了一个类似实际SELECT操作的界面;"美化"则指界面设计的优化,使用户...
9. **Option样式**:虽然不能直接修改Option的样式,但我们可以通过JavaScript来动态创建Option元素并设置它们的样式,或者考虑使用其他HTML元素(如`<li>`)配合JavaScript模拟Select的功能。 10. **优化性能**:...
在网页设计中,Select元素是用于创建下拉菜单的基本组件,它通常用于提供一组可选的选项。然而,原生的Select在样式控制上相对有限,导致其在现代...在实际开发中,不断尝试和优化,才能找到最适合项目需求的解决方案。
`jQuery select下拉框美化代码.zip`这个压缩包提供了一种解决方案,旨在提升传统HTML `<select>` 元素的视觉效果。下面将详细探讨这个主题。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件...
在这个场景中,"jquery下拉框选择select美化插件FancySelect.js.zip" 提供了一个解决方案,专门针对HTML中的`<select>`元素进行美化,提升网页的视觉体验。 `<select>`是HTML中用于创建下拉列表的标签,但其默认...
在网页设计中,为了提供更好...这种技术广泛应用于现代Web应用,提供了一种优雅的解决方案,解决了传统`<select>`元素在样式和交互上的局限性。在实际开发中,可以根据项目需求进行调整和扩展,以满足不同的业务场景。
这些文件共同构成了一个SELECT美化解决方案。首先,`jquery-1.11.3.min.js`是jQuery库的压缩版,这是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务。jQuery的引入意味着我们将利用它的...
在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...
"jquery select下拉框美化代码.zip" 提供了一种解决方案,通过结合jQuery库来增强和美化下拉框的外观和交互效果,使其更加吸引用户。 这个代码包可能包含以下几个部分: 1. **jQuery库**:jQuery是一个广泛使用的...
在网页设计中,用户体验往往扮演着至关重要的角色。...无论是个人项目还是企业级应用,selectList都是一个值得考虑的解决方案。通过学习和熟练掌握这款插件,你可以在网页设计中创造出更加吸引人的交互元素。
本压缩包提供的"表单美化之select的下拉按钮美化JS代码"正是为了解决这一问题,通过JavaScript来提升`<select>`元素的视觉效果。 在HTML中,`<select>`元素用于创建一个下拉列表,其内部使用`<option>`元素定义各个...
在网页设计中,表单是用户...总的来说,`select`下拉按钮的美化涉及CSS样式控制、JavaScript库的运用以及自定义组件的开发。通过这些技术,我们可以创建出与整体设计风格相融合,同时具备优秀用户体验的下拉选择组件。
"select去样式美化(完美兼容)"是一个针对这个问题的解决方案,它旨在提供一种方法,通过使用`div`元素替代`select`结构,以实现更统一、更易于控制的样式效果,同时保证跨浏览器的兼容性。 这个程序的核心思想是...
在"JS特效-其它代码"的标签中,我们可以推断出这个压缩包提供了一种使用JavaScript实现的解决方案。这种方法通常包括以下步骤: 1. **隐藏原生`<select>`**:通过CSS将`<select>`元素设置为不可见或透明,但保留其...
在这种情况下,“selectbox Js实现的下拉复选框”是一个很好的解决方案,它将复选框的功能与下拉菜单相结合,既节省了空间,又保持了功能的完整。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言,...
本项目"模拟select点击显示下拉菜单.zip"就提供了这样一个解决方案。 首先,我们需要了解HTML的基础结构。在这个案例中,我们可能会看到一个`<div>`元素作为模拟select的容器,包含一个`<span>`元素作为点击触发器...
【标题】"模拟select下拉框插件SelectBox"是一个专为网页设计开发的JavaScript插件,主要用于替换原生HTML的`<select...对于那些希望提升网站用户体验并优化选择控件的开发者来说,SelectBox是一个值得考虑的解决方案。
如果项目已经使用了jQuery,可以考虑使用现有的插件,如`multiselect.js`或`select2`,它们提供了预封装的多选下拉框解决方案。 以上就是关于“html多选下拉框,CheckBox的Select组件”的详细解释。通过这种方式,...