jQuery 文本框模拟下拉列表效果

更新时间：2010年02月08日 07:46:37 作者：

学校作业的问题，就在网搜了一下，找不到文本框模拟的（可能本人RP问题），看到的都是用div的，结果就自己弄了一个，主要就是改变背景图片的位置，让div的位置放到文本框上面，没什么其它的东西，呵呵，见笑了

网页代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery14.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>New Web Project</title> <script type="text/javascript" language="JavaScript"> $(document).ready(function(){ $('#test').val(''); //定义一个下拉按钮层，并配置样式(位置，定位点坐标，大小，背景图片，Z轴)，追加到文本框后面 $DIV = $('<div></div>').css('position', 'absolute').css('left', $('#test').position().left + $('#test').width() - 15 + 'px').css('top', $('#test').position().top + 2 + 'px').css('background', 'transparent url(https://www.jb51.net/upload/2010-2/20100208074636483.gif) no-repeat top left').css('height', '16px').css('width', '15px').css('z-index', '100'); $('#test').after($DIV); //定义一个下拉框层，并配置样式(位置，定位点坐标，宽度，Z轴)，先将其隐藏 $SELECT = $('<div></div>').css('position', 'absolute').css('border', '1px solid #000000').css('left', $('#test').position().left + 'px').css ('top', $('#test').position().top + $('#test').height() + 7 + 'px').css('width', $('#test').width() + 'px').css('z-index', '100'); $('#test').after($SELECT); $SELECT.hide(); //定义五个选项层，并配置样式(宽度，Z轴一定要比下拉框层高)，添加name、value属性，加入下拉框层 for (var i = 0; i <= 5; i++) { $OPTION = $('<div>option' + i + '</div>').attr('name', 'option').attr('value', 'value' + i).css('width', $SELECT.width()).css('z-index', $SELECT.css('z-index') + 1); $SELECT.append($OPTION); }; //选项层的鼠标移入移出样式 $SELECT.mouseover(function(event){ if ($(event.target).attr('name') == 'option') { //移入时背景色变深，字色变白 $(event.target).css('background-color', '#000077').css('color', 'white'); $(event.target).mouseout(function(){ //移出是背景色变白，字色变黑 $(event.target).css('background-color', '#FFFFFF').css('color', '#000000'); }); } }); //鼠标进入修改背景图位置 $DIV.mouseover(function(){ $DIV.css('background-position', ' 0% -16px'); }); //鼠标移出修改背景图位置 $DIV.mouseout(function(){ $DIV.css('background-position', ' 0% -0px'); }); //鼠标按下修改背景图位置 $DIV.mousedown(function(){ $DIV.css('background-position', ' 0% -32px'); }); //鼠标释放修改背景图位置 $DIV.mouseup(function(){ $DIV.css('background-position', ' 0% -16px'); $SELECT.show(); }); //通过点击位置，判断弹出的显示 $(document).mouseup(function(event){ //如果是下拉按钮层或下拉框层，则依然显示下拉框层 if (event.target == $SELECT.get(0) || event.target == $DIV.get(0)) { $SELECT.show(); } else { //如果是选项层，则改变文本框的值 if ($(event.target).attr('name') == 'option') { //弹出value观察 alert($(event.target).attr('value')); $('#test').val($(event.target).html()); } //如果是其他位置，则将下拉框层 if ($SELECT.css('display') == 'block') { $SELECT.hide(); } } }); }); </script> </head> <body> <input type="text" id="test" name="test" /> <button type="button" onclick="alert($('#test').serialize())">提交</button> 运行后，需要刷新一下， 才可以加载jquery</body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

用到的图片：

最后的效果：

默认/光标移出时文本框的样子：

鼠标移入时文本框的样子，当鼠标案件释放时，若光标还在div上也是这样：

鼠标按键按下时时文本框的样子：

最终效果：

您可能感兴趣的文章:

jquery cookie实现的简单换肤功能适合小网站
使用jquery cookie做了一个简单的换肤功能适合小网站并且代码低级，具体实现过程如下，感兴趣的朋友可以了解下
2013-08-08
jQuery操作css方法的超全用法
最近看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴,下面这篇文章主要给大家介绍了关于jQuery操作css方法的超全用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
jquery实现的Banner广告收缩效果代码
这篇文章主要介绍了jquery实现的Banner广告收缩效果代码,可实现点击按钮收缩与展开广告图片的功能,非常简单实用,需要的朋友可以参考下
2015-09-09
为指定的元素添加遮罩层的示例代码
遮罩在某些情况下还是比较实用的，下面为大家介绍下如何为指定的元素添加遮罩层，感兴趣的朋友可以了解下
2014-01-01
基于jQuery实现选取月份插件附源码下载
这是一个基于jQuery的可以选择年份和月份的月份拾取插件，你可以设置点击页面上的任意元素触发弹出年月选择面板，可以是一个链接也可以是一个输入框，广泛应用于月份查询，而无需设置select表单。
2015-12-12
基于jquery的超简单上下翻
简单上下翻，函数，获取元素。
2010-04-04
基于jquery实现轮播焦点图插件
这篇文章主要为大家详细介绍了基于jquery实现轮播焦点图插件，具有一定的参考价值，代码很详细，感兴趣的小伙伴们可以参考一下
2016-03-03
jQuery UI Dialog控件中的表单无法正常提交的解决方法
研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了动态生成的HTML元素内。
2010-12-12
详解jQuery简单的表格应用
本文主要对表格的简单应用：表格变色;表格展开关闭;表格内容筛选进行实例分析介绍。具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12
jquery拖拽排序简单实现方法(效果增强版)
这篇文章主要介绍了jquery拖拽排序简单实现方法,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
2016-02-02

jQuery 文本框模拟下拉列表效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具