wangking717
- 浏览: 257220 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
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: 欢迎共同讨论交流。
- 大小: 28.6 KB
分享到：
发表评论
-
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 3055Zend Studio在PHP上的开发是比较不错的， ... -
jquery bxslider幻灯片样式改造
2013-11-15 18:08 1781找了很多jquery的幻灯片，都觉得不是很好，最后发现bx ... -
Jquery文字连接移动效果，鼠标放上去，横向移动特效
2013-09-30 03:58 1807这种jQuery文字横向滚动效果，可以应用到文章列表页标题栏 ... -
企业网站CMS开发萌芽阶段，正在策划中...
2013-09-23 00:20 968做多了企业级别的网站，顿时觉得很多重复性的工作，所以打算策 ... -
在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 3348用于清理页面中多余的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 1427wangking 写道 为了保证数据的完整性以及正确性 ... -
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=...