Jquery实现div模拟Select控件
来源:js-blog.cn 发布时间:2008-12-01 15:47:00
标签:jquery,select,模拟,框架
大家已经从实际使用中了解了jquery这个javascript框架的强大,其实jquery更加强大的是可扩展。你可以编写自己的基于jquery的插件,使你的代码功能更加简洁,也使程序员们更加轻松。。。
大家都知道在html中div和table是无法覆盖select和flash这样的window级别的元素,可是页面中我们不可能不使用浮动的div层,这样就导致用户体验不够好,一般情况下,我们会在显示浮动div层时把select和flash控件隐藏,这样暂时解决了浮动层的可观性,可是在隐藏了select和flash势必会让浏览者感觉到页面内容的变化。那我们是否可以使用其他控件来代替他们呢?
下面我们就来看一个小小的div模拟select控件的应用。。。
<script language="javascript" type="text/javascript">
var Options1 = [["00点","00"],["01点","01"],["02点","02"],["03点","03"],["04点","04"],["05点","05"],["06点","06"],["07点","07"],
["08点","08"],["09点","09"],["10点","10"],["11点","11"],["12点","12"],["13点","13"],["14点","14"],["15点","15"],
["16点","16"],["17点","17"],["18点","18"],["19点","19"],["20点","20"],["21点","21"],["22点","22"],["23点","23"]];
var Options2 = [["00分","00"],["15分","15"],["30分","30"],["45分","45"]];
<!--定义select列表项option-->
$.dmSelect = function(name,value,data){
$("#" + name).attr("readonly","readonly"); //设置控件只读
var top = $("#" + name).offset().top; //获取控件top、left位置和width、height
var left = $("#" + name).offset().left;
var height = $("#" + name).height();
var width = $("#" + name).width()+3;
var option_open = false; //标记是否打开下拉option
function __dropheight(l){var h;if(l>10 || l<1){h = 10 * 20;}else{h = l * 20; h += 2;}return h;} //计算下拉option显示高度
var div_html = "<div id='_li_"+name+"' style='position:absolute;background-color:#FFFFFF;top:"+(top+height+5)+"px;left:"+left+"px;width:"+((width<30)?30:width)+"px;height:"+__dropheight(data.length)+"px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none;z-index:99999;'>";
//for循环填充option
for(var i = 0;i < data.length; i++){div_html += "<div style='text-align:left;padding-left:5px;' value='" + data[i][1] + "'>" + data[i][0] + "</div>";}
div_html += "</div>";
$("#" + name).after(div_html); //添加到input控件后面
function __open_option(){$("div[id^='_li_']").hide();$("#_li_" + name).show();option_open=true;} //显示下拉option
function __hide_option(){$("#_li_" + name).hide();option_open=false;$(document).unbind("click",__hide_option);} //隐藏下拉option
$("#" + name).click(function(event){if(option_open){__hide_option();}else{__open_option();$(document).bind("click",__hide_option)}event.stopPropagation();});
$("#_li_" + name + " > div").hover(function(){$(this).css({"background-color":"#CCCCCC"});},function(){$(this).css({"background-color":"#FFFFFF"});})
.click(function(){$("#" + name).val($(this).html());$("#" + value).val($(this).attr("value"));});
};
<!--实现div模拟select插件代码-->
$(document).ready(function(){
$.dmSelect("time_hour","hf_time_hour",Options1);
$.dmSelect("time_minute","hf_time_minute",Options2);
});
<!--调用方法-->
</script>
然后在页面body中添加如下input控件
<input type="text" id="time_hour" class="dropdown-select" />
<input type="hidden" id="hf_time_hour" />
<input type="text" id="time_minute" class="dropdown-select" />
<input type="hidden" id="hf_time_minute" />
后面的hidden隐藏控件只要是用来记录select选择的value值(value值不等同与text显示的值)
这个基于jquery的div模拟select下拉列表还有不足的地方,以后有时间再改进改进。
0
投稿
猜你喜欢
- 在我之前写的几篇网站优化的文章中,着墨最多的是减少HTTP请求。通过减少请求数目,你的浏览器必须能对你的网站所有内容成功检索,总的HTTP请
- 一.脚本基础1.USE语句设置当前数据库。2.声明变量语法:DECLARE @变量名 变量类型在声明变量后,给变量赋值之前,变量的值为NUL
- //********************** index.asp ************************//<
- 问题:1.一个销售系统,设有各级代理商,每个代理商的表是这样设计的 数据库结构表1: 代理商资料表[id]
- 本文介绍了4个asp数据库管理中常用到的access数据库操作程序,一般的网站管理后台都提供了这个功能,方便管理员对数据库数据的管理维护。1
- 说明和代码如下:<%@ language = vbscript%><% 
- 遵循Web标准的思想,网页要表现出一种亲和力。那么,针对残障用户来说,其“阅读”器可不能读取图像上传递的信息的。所以我们会采用一种Using
- 插件下载:blueideasearch.xpi首先第一步 说一下怎么样查看firefox插件的源码, 就我上边写的那个东西,把它下载下来.将
- 目前已经有很多生成html的新闻系统,但是都是用的模板,本函数实现把asp页面产生的html代码保存成为一个html文件,这样就没有必要改动
- 看起来现在经常用到这样的效果来提高用户体验,所以就没事写了一个输入框提示列表的效果使用宽屏的朋友麻烦帮忙测试下,列表的位置有没有错位。代码可
- sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
- 阅读上一篇:一个完美网站的101项指标.第三部分.易用性 设计体现了一个网站的艺术素养,然而并不是说您应当过分设计,设计风格应结合您的行业,
- 为最终用户提供的功能主要由一个HTML文件和两个ASP文件提供,它们负责接受用户的订阅申请以及退出邮件列表申请。 用户的个人信息在图1所示的
- 一、概述公司新购了一批PC,准备把几个性能较优的PC升级为数据库服务器,替换老旧的机器。公司有套POS终端软件,后台数据存储是 MySQL
- 摘要:SELECT 语句可以帮助我们从MySQL中取出数据。SELECT 大概是 SQL 语言中最常用的语句,而且怎样使用它也最为讲究;用它
- 我生平不爱学习,所以说不出什么洋洋洒洒的大道理,貌似也写不出妙语连珠的学术文章,有感于现在宅到极致的生活状态,故一篇图文并茂的文章诞生了(大
- 1. 游戏是更注重于体验的产品,所以应该将游戏本省做得更加炫动和增加参与感觉。2. 网络游戏和单击游戏的区别在于社会化的添加,所以运用好这样
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们可以通过export with rows=no来得到,但它的输出因为格式
- 请问如何从ASP连接到Oracle Server?可用下面的代码进行连接: <%@ Lan
- 在大型商业应用中,数据的异地容灾备份十分重要,也必不可少。笔者根据自己的实践经验,设计了一套简洁地实现异地数据自动备份的方法,可供数据库管理