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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 文本框模拟下拉列表效果

Javascript: 图片放大镜效果代码; 超棒的javascript页面顶部卷动广告效果; javascript 改变网页加载的CSS; javascript实现仿银行密码输入框效果的代码; 麦鸡的TAB切换功能结合了javascript和css; mapper--图片热点区域高亮组件官方站点; undefined==null引发的两者区别与联系; 用cookies实现的可记忆的样式切换效果代码下载; 特漂亮的JS图片排列旋转效果代码; js jquery做的图片连续滚动代码; 利用js跨页面保存变量做菜单的方法; 用javascript做一个webgame连连看大家看下; Javascript 各浏览器的 Javascript 效率对比; 北京奥运官方网站幻灯切换效果flash版打包下载; 纯js无flash仿搜狐女人频道FLASH图片切换效果代码; javascript实现的三维正方体(兼容ie7,ff); 浅谈javascript函数劫持[转自xfocus]; 连续操作HTMLElement对象图文解决方法; Javascript jquery css 写的简单进度条控件; 地址栏上的一段语句，改变页面的风格。（教程）

No. « ‹ 207 208 209 210 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 207 ::

收藏到网摘: n/a

toString()一个会自动调用的方法关于页面被拦截的问题

学校作业的问题，就在网搜了一下，找不到文本框模拟的（可能本人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="/upload/tech/20100227/20100227014532_92c8c96e4c37100777c7190b76d28233.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(http://www.ruanchen.com/').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 全选提示:你可先修改部分代码,再按运行]

用到的图片：

最后的效果：

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

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

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

最终效果：

toString()一个会自动调用的方法关于页面被拦截的问题

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

评论 (0) All