- 浏览: 1127100 次
- 性别:
- 来自: 火星郊区
博客专栏
-
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 2111今天做一个随屏幕滚动的导航条时,发现一个问题: 火狐、谷歌、 ... -
Jquery 将表单序列化为Json对象
2012-11-07 08:23 31502大家知道Jquery中有serialize方法,可以将表单序列 ... -
javascript “||”、“&&”的灵活运用
2012-11-06 08:22 1003你是否看到过这样的代码:a=a||""; ... -
Jquery error 事件
2012-11-06 08:21 1136error 通常用来处理图像无法加载的错误。$(" ... -
如何为javascript方法参数设置默认值
2012-11-06 08:21 1028你是否遇到过这样的情况,写了个function,无参数。 ... -
看了这个才发现jQuery源代码不是那么晦涩
2012-11-06 08:20 1485很多人觉得jquery、ext等一些开源js源代码 十分的晦涩 ... -
推荐40个精心挑选的功能强大的jQuery导航插件
2012-08-23 09:22 1103推荐40个精心挑选的功能强大的jQuery导航插件 ...
相关推荐
附件是安装NumPy教程_详细版,文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!
语音端点检测及其在Matlab中的实现.zip
使用C#完成一般文档的打印,带有页眉,页脚文档打印,表格打印,打印预览等
directx修复工具 DirectX修复工具(DirectX repair)是系统DirectX组件修复工具,DirectX修复工具主要是用于检测当前系统的DirectX状态,若发现异常情况就可以马上进行修复,非常快捷,使用效果也非常好。
人脸识别的主要算法 其核心算法是 欧式距离算法使用该算法计算两张脸的面部特征差异,一般在0.6 以下都可以被认为是同一张脸 人脸识别的主要步骤 1 获得人脸图片 2 将人脸图片转为128D的矩阵(这个也就是人脸特征的一种数字化表现) 3 保存人脸128D的特征到文件中 4 获取其他人脸转为128D特征通过欧式距离算法与我们保存的特征对比,如果差距在0.6以下就说明两张脸差距比较小
ciscn 全国大学生信息安全竞赛知识问答-CISCN 题库.zip
JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)JAVA+SQL离散数学题库管理系统(源代码+LW+外文翻译)
strcmp函数应用.zip
蓝桥杯单片机第十一届国赛设计题试做
基于MATLAB的pca人脸识别.zip
520.html
JAVA在线考试管理系统(源代码+LW+开题报告+外文翻译+英文文献+答辩PPT)
STR710的定时器编程C语言例子,开发环境为IAR EWARM。.zip
协同过滤算法(Collaborative Filtering)是一种经典的推荐算法,其基本原理是“协同大家的反馈、评价和意见,一起对海量的信息进行过滤,从中筛选出用户可能感兴趣的信息”。它主要依赖于用户和物品之间的行为关系进行推荐。 协同过滤算法主要分为两类: 基于物品的协同过滤算法:给用户推荐与他之前喜欢的物品相似的物品。 基于用户的协同过滤算法:给用户推荐与他兴趣相似的用户喜欢的物品。 协同过滤算法的优点包括: 无需事先对商品或用户进行分类或标注,适用于各种类型的数据。 算法简单易懂,容易实现和部署。 推荐结果准确性较高,能够为用户提供个性化的推荐服务。 然而,协同过滤算法也存在一些缺点: 对数据量和数据质量要求较高,需要大量的历史数据和较高的数据质量。 容易受到“冷启动”问题的影响,即对新用户或新商品的推荐效果较差。 存在“同质化”问题,即推荐结果容易出现重复或相似的情况。 协同过滤算法在多个场景中有广泛的应用,如电商推荐系统、社交网络推荐和视频推荐系统等。在这些场景中,协同过滤算法可以根据用户的历史行为数据,推荐与用户兴趣相似的商品、用户或内容,从而提高用户的购买转化率、活跃度和社交体验。 未来,协同过滤算法的发展方向可能是结合其他推荐算法形成混合推荐系统,以充分发挥各算法的优势。
FTP(File Transfer Protocol)是文件传输协议的简称。 FTP的主要作用,就是让用户连接上一个远程计算机(这些计算机上运行着FTP服务器程序)查看远程计算机有哪些文件,然后把文件从远程计算机上拷到本地计算机,或把本地计算机的文件送到远程计算机去。 目前FTP服务器软件都为国外作品,例如Server_U、IIS,国内成熟的FTP服务器软件很少,有一些如(Crob FTP Server),但从功能上看来远不能和那些流行的服务器软件媲美。
本项目基于深度学习TensorFlow框架,针对滚动轴承故障诊断方法进行研究。项目采用了卷积神经网络(CNN)对轴承振动信号进行特征提取和分类,实现了对滚动轴承不同故障类型的自动诊断。 在技术实现上,项目利用TensorFlow搭建了一个高效的CNN模型,通过多层卷积、池化操作以及全连接层,自动学习轴承振动信号中的故障特征。同时,采用交叉熵损失函数优化模型参数,提高故障识别率。此外,项目还集成了数据预处理、模型训练、测试评估等功能模块,方便用户快速上手并进行实验研究。 经过运行测试,该项目代码运行稳定,诊断效果良好,可广泛应用于滚动轴承故障诊断领域。对于计算机相关专业的在校学生、老师或企业员工来说,该项目是一份难得的高分大作业资源,同时也是小白学习和实际项目借鉴的优秀参考资料。请放心下载使用,为您的学习和工作提供帮助!
超详细的SpringBoot框架入门教程 Spring Boot框架快速入门教程以大量示例讲解了Spring Boot在各类情境中的应用,让大家可以跟着老师的思维和代码快速理解并掌握。适用于Java 开发人员,尤其是初学Spring Boot的人员和需要从传统 Spring 转向 Spring Boot 开发的技术人员。 下边是动力节点的SpringBoot教程非常适合初学入门,讲的非常详细,而且全程无废话!
毕业设计[主机域名]ISPConfig 3.0.1.3_ispconfig3-codepub.zip
matlab开发-用交叉熵优化多变量宏观模型随机多极值优化.zip
矩阵特征值的计算方法.zip