- 浏览: 257303 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
wangking717:
4jcms已转为私人项目了,供以后自己用~ 如果有人感兴趣的, ...
企业网站CMS开发萌芽阶段,正在策划中... -
wangking717:
CommonAccount 写道怎么我写了没反应你需要把jqu ...
Jquery文字连接移动效果,鼠标放上去,横向移动特效 -
程序员是怎么炼成的:
你好,需要用到的jar包有哪些,如果用httclient4来开 ...
HttpClient4 Post XML数据 -
CommonAccount:
怎么我写了没反应
Jquery文字连接移动效果,鼠标放上去,横向移动特效 -
wangking717:
shankesgk2 写道这个还在开发吗?是的,在开发阶段~
企业网站CMS开发萌芽阶段,正在策划中...
wangking 写道
下拉框特点:
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码,就和用原生态的SELECT一样的原理,使用简单。
3.功能强大,在下拉框中增加了extraData DIV层,供用户自定义特殊需求,当然用户也可以不选择使用extraData DIV层,用普通的SELECT即可。
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码,就和用原生态的SELECT一样的原理,使用简单。
3.功能强大,在下拉框中增加了extraData DIV层,供用户自定义特殊需求,当然用户也可以不选择使用extraData DIV层,用普通的SELECT即可。
下拉框截图:
具体代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉框测试</title> <script type="text/javascript" src="__JS__/jquery.min.js"></script> <style type="text/css"> <!-- body {padding:10px;} * {margin:0; padding:0; font-size:12px;} ul,li {list-style-type:none;} .select {width:150px; height:25px; border:1px solid #ccc; padding-left:10px;} .defaultItem{background:url(__IMAGE__/select_arrow.gif) no-repeat right center white;} .select span {cursor:pointer; display:block; width:100%; height:100%;overflow:hidden;} .select table {height:100%;} .select td {vertical-align:middle;} .select ul{width:181px;} .select ul li {cursor:pointer;} .select .items {overflow-y: scroll; overflow-x: hidden;max-height:148px; height:148px;width:180px; position:absolute;border:1px dashed #ccc; background:#fff;z-index:999;display:none;} .select .items li {display:block; line-height:25px; padding-left:10px;} .select .hover,.onhover {background:#ccc;} .select .extraData{position:absolute;line-height:20px;padding-left:10px; padding-top:5px; padding-bottom:5px;border:1px dashed #ccc;background:white;display:none;} --> </style> <script type="text/javascript"> var isItemHover = 0; // ITEM是否正在HOVER使用,供清楚ONHOVER状态 var delayTime4Select = null; //延迟消失下拉框 var selectUsingObj = ""; //正在使用哪个SELECT,供MOUSE OVER AND OUT时使用 var selectCloseUsing = 0; //是否在执行关闭操作 var isClickSelectTextObj = 0; //是否点击了SELECT控件里的输入框 $(document).ready(function(){ $(".select :text").click(function(){ //当鼠标点击了.select里面的任何一个输入框,则取消掉[鼠标移出焦点后,自动消失事件] isClickSelectTextObj = 1; }); $('.defaultItem').click(function(event){ //鼠标点击[请选择],弹出下拉框 if(selectCloseUsing == 1){ return; } var parentObj = $(this).parent(); if(selectUsingObj != "" && selectUsingObj != parentObj.attr("idtag")){ $("[idtag='"+selectUsingObj+"']").find('ul.items').hide(); $("[idtag='"+selectUsingObj+"']").find('.extraData').hide(); } if(selectUsingObj != ""){ //点击事件[执行关闭SELECT]操作 clearTimeout(delayTime4Select); selectCloseUsing = 1; var itemsOBJ = parentObj.find('ul.items');; itemsOBJ.hide(); var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData"); extraOBJ.hide(); selectUsingObj = ""; delayTime4Select = setTimeout(function(){ selectCloseUsing = 0; isClickSelectTextObj = 0; },200); }else{ //点击事件[执行打开SELECT]操作 selectUsingObj = parentObj.attr("idtag"); clearTimeout(delayTime4Select); var selectWidth = parentObj.width(); //动态设置ul.items宽度 var selectHeight = parentObj.height(); //动态设置ul.items的TOP偏移量 var id = parentObj.attr("idtag"); var hiddenVal = ""; //隐藏域的值,用来显示选中ITEM项 var element=$("#"+id); if(element.length > 0){ hiddenVal = $("#"+id).val(); } var itemsOBJ = parentObj.find('ul.items'); itemsOBJ.css("width",selectWidth+11); itemsOBJ.css({top:parentObj.offset().top+selectHeight,left:parentObj.offset().left}); itemsOBJ.show(); //找到ul.items显示 var extraOBJ = parentObj.find(".extraData"); if(extraOBJ.length > 0){ //SELECT额外数据DIV存在 extraOBJ.css("width",selectWidth+1); extraOBJ.css({top:parentObj.offset().top+selectHeight+itemsOBJ.height(),left:parentObj.offset().left}); extraOBJ.show(); } parentObj.find('li').hover(function(){ isItemHover = 1; $(this).addClass('hover'); $(this).parent().find('li').removeClass('onhover'); }, function(){ $(this).removeClass('hover'); });//li的hover效果 if(isItemHover == 0){ itemsOBJ.find("li").each(function(){ if(hiddenVal == $(this).attr("value")){ $(this).addClass('onhover'); } }); } } }); $('.select,.extraData').mouseover(function(event){ selectCloseUsing = 0; }); $('.select,.extraData').mouseout(function(event){ selectCloseUsing = 1; var toElement = null; if ($.browser.mozilla){ //火狐下不支持toElement toElement = event.relatedTarget; }else{ toElement = event.toElement; } if($(this)[0].contains(toElement)){ //如果是内部元素,则不执行以下代码 return; } var itemsOBJ = null; if($(this).attr("class") == "select"){ itemsOBJ = $(this).find('ul.items'); }else{ itemsOBJ = $(this).parents("div").find('ul.items'); } delayTime4Select = setTimeout(function(){ if(selectCloseUsing == 1 && isClickSelectTextObj == 0){ itemsOBJ.hide(); var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData"); if (extraOBJ.length > 0) { extraOBJ.hide(); } isItemHover = 0; selectUsingObj = ""; } },3000); }); $('ul.items li').live("click",function(){ selectCloseUsing = 1; var parentDiv = $(this).parents("div"); parentDiv.find('td').html($(this).html()); var id = parentDiv.attr("idtag"); var element=$("#"+id); if(element.length > 0){ $("#"+id).val($(this).attr("value")); }else{ parentDiv.after('<input type="hidden" id="'+id+'" name="'+id+'" value="'+$(this).attr("value")+'"/>'); } parentDiv.find('ul').hide(); var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData"); if (extraOBJ.length > 0) { extraOBJ.hide(); } selectUsingObj = ""; isItemHover = 0; delayTime4Select = setTimeout(function(){ selectCloseUsing = 0; isClickSelectTextObj = 0; },200); }); }); //给firefox定义contains()方法,ie下不起作用 if(typeof(HTMLElement)!="undefined"){ HTMLElement.prototype.contains=function(obj){ while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素 if(obj==this) return true; obj=obj.parentNode; } return false; }; } function closeSelect(obj){ selectCloseUsing = 1; var itemsOBJ = $(obj).parents("div").find('ul.items');; itemsOBJ.hide(); var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData"); extraOBJ.hide(); selectUsingObj = ""; delayTime4Select = setTimeout(function(){ selectCloseUsing = 0; isClickSelectTextObj = 0; },200); } </script> </head> <body> <div idtag="name" class="select" style="width:521px;height:50px;"> <span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span> <ul class="items"> <li value="1111">选项一</li> <li value="2222">选项二</li> <li value="3333">选项三</li> <li value="4444">选项四</li> <li value="5555">选项五</li> <li value="6666">选项六</li> <li value="7777">选项七</li> <li value="8888">选项八</li> <li value="9999">选项九</li> <li value="0000">选项十</li> </ul> <div class="extraData"> <input type="text" id="aaa" value="Close"/> 这个DIV层属于扩展层,用户可根据自己需求确定是否需要这个。<input type="button" id="aaa" value="Close" onclick="closeSelect(this)"/></div> </div> <br/><br/><br/> <!-- SELECT.......[开始] --> <div idtag="users" class="select"> <span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span> <ul class="items"> <li value="1">wangking</li> <li value="2">jiaojiao</li> </ul> </div> <!-- SELECT.......[结束] --><br/><br/><br/> <input type="text" id="testinput" /><br/><br/><br/> <input type="text" id="haha" /> </body> </html>
怎么使用?如下:
INCLUDE CSS AND JS。。。。 THEN。。。 这个是原生态的SELECT: <select name="users" id="users"> <option value="1">wangking</option> <option value="2">jiaojiao</option> </select> 则对应改为: <div idtag="users" class="select"> <span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span> <ul class="items"> <li value="1">wangking</li> <li value="2">jiaojiao</li> </ul> </div>
PS: 欢迎共同讨论交流。
发表评论
-
uni-app 云打包iOS微信SDK需要配置通用链接(Universal Links)
2020-08-18 22:15 0从HBuilderX 2.3.4(alpha)版本开始, ... -
极速免费云服务器活动,享用终身永久免费
2019-12-26 10:03 5一直在用三丰云的免费云服务器,很实用,流畅性稳定性都很好,可 ... -
jQuery动画效果学习
2016-05-09 16:36 6181、元素的显示和隐藏 display:none; ... -
大型网站系统架构的演化
2015-12-25 11:57 488前言 一个成熟的大型网站(如淘宝、京东等)的系统 ... -
Zend Studio代码无法自动提示以及代码跟踪函数和变量问题的解决方法
2014-10-22 22:31 618今天在工作中,发现我的Zend Studio8.0.1无法进 ... -
Zend Studio上安装Aptana,打造完美编辑器。
2014-09-16 11:30 3056Zend Studio在PHP上的开发是比较不错的, ... -
jquery bxslider幻灯片样式改造
2013-11-15 18:08 1781找了很多jquery的幻灯片,都觉得不是很好,最后发现bx ... -
Jquery文字连接移动效果,鼠标放上去,横向移动特效
2013-09-30 03:58 1809这种jQuery文字横向滚动效果,可以应用到文章列表页标题栏 ... -
企业网站CMS开发萌芽阶段,正在策划中...
2013-09-23 00:20 970做多了企业级别的网站,顿时觉得很多重复性的工作,所以打算策 ... -
在WINDOWS中设置计划任务执行PHP文件
2013-03-17 22:05 1102在网上找了些WINDOWS执行PHP的计划任务的方法,有一个 ... -
jQuery图片延迟加载插件
2013-03-13 17:17 1048有时候网页比较大且图片有比较多,会导致页面打开的速度 ... -
EMAIL群发营销设计规范
2013-03-05 13:48 1213一般做邮件群发,很容易进入垃圾邮箱,或者提示一下: 这不是 ... -
去除多余无用的CSS代码,dust-me-selectors堪称利器!
2012-12-06 00:19 3351用于清理页面中多余的css的工具:dust-me-select ... -
JS DIV拖动交换位置DEMO
2012-11-07 15:16 2524该DEMO来自网上,其中优化了部分的BUG。并且DRAGSOR ... -
解决IE6下FIXED BUG。轻松定位。
2012-10-20 11:26 1198代码非常简单。自己在本地测试一下。。 /* 兼容 ... -
jquery 获取各种有用的高度定位
2012-09-20 14:13 933获取浏览器显示区域的高度 : $(window). ... -
[转]IE6下js的onmouseover和onmouseout事件连续触发闪烁解决方法
2012-09-17 11:26 1899解决HTML内部元素的Mouse事件干扰 话说有一个DIV元素 ... -
网页速度很慢优化方案:如何提高网页加载速度,提升网站加载速度
2012-04-08 07:15 3638网站加载速度的快慢, ... -
保证数据正确性,乐观锁的控制!
2011-03-13 17:44 1428wangking 写道 为了保证数据的完整性以及正确性 ... -
CSS的一些应用技巧
2011-02-26 03:28 9941. 怎么控制一行拥有几条LI。 .rep { ...
相关推荐
这是一款实用的select下拉框美化jquery插件。该select下拉框的原理是将select标签隐藏,并按照select标签用div和list绘制一个控件,将用户对div的操作映射到select上。css文件可以根据不同需求修改。
jQuery+div+css模拟select自定义下拉列表框,简单轻巧实用。
div+css打造select下拉菜单,可自己修改相应样式!!!
4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery...
非常实用的jQuery模拟selected选择下拉框美化特效,对于传统的IE下的下拉框大家可能都觉得 跟现在的页面都格格不入,大家都想美化下,今天推荐的这个JS特效是利用jQuery以及UL改造的 select下拉选择美化特效还是很...
select自定义样式,div+css模拟select下拉框效果,html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <...
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式。原生的下拉框也保留在div里面隐藏着...
模拟下拉框select,之前穿过一个,是纯div和li写的,现在这个的本质还是select,虽然没有经过实验,不过应该不用怕开发的时候取不到值这个问题,修改起来也很简单,只要有点css基础的都应该没有问题~
select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化。虽然其美化的插件很多,一搜一大把,但是需要引入长长的css...<div class=select_box> › 选项1 选项1 选项2 选项3</li> </di
说一百句,不如我给大家贴张效果图,效果图请看...style type="text/css"> * { margin: 0; padding: 0; } div.centent { float: left; text-align: center; margin: 10px; } span { display: block; margin: 2px 2px
说不清楚,直接上图 <!DOCTYPE html> <... <head>...style type="text/css"> * { margin: 0; padding: 0; } div.centent { float: left; text-align: center; margin: 10px; }
1.整合了第三方 jQuery 插件 (select2) <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <link rel=stylesheet href=js/select2/select2.min.css /&...
大家肯定都见过类似效果的网页,怎么实现的呢,代码很简单: <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title></title> <style type=...