1、jQuery制作select效果,此效果可用作自动提示功能中;
2、此示例包括键盘上、下合回车键的判断;
3、具体看附件,包含详细注释:
引用
<!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>
<title>jQuery模拟select控件</title>
<style type="text/css">
/** Dev by CssRain.cn **/
html,body,ul,li,div,a{margin:0;padding:0;font-size:12px;}
.CRselectBox {
background:#FFFFFF url(../image/select_box_off.gif) no-repeat right center;
border:1px solid #999;
cursor:pointer;
display:block;
width: 100px; height: 20px;
}
.CRselectBoxHover {
background:#FFFFFF url(../image/select_box_on.gif) no-repeat right center;
}
.CRselectBox a.CRselectValue {
display:block;
margin:1px 1px 2px;
padding:1px 20px 2px 4px;
white-space:nowrap;
color:#000;
overflow:hidden;
width:74px;
}
.CRselectBoxOptions {
background:#FFFFFF;
border:1px solid #999;
margin-left:-1px;
list-style:none;
overflow:auto;
z-index:1000;
position: absolute;
width:100px;display:none;
}
.CRselectBoxOptions a{
color:#000;
display:block;
height:22px;
line-height:22px;
padding-left:4px;
background:#fff;
overflow:hidden;
white-space:nowrap;
}
.CRselectBoxOptions a:hover{
background:#bbb
}
.CRselectBoxOptions a.selected{
background:#bbb
}
/* 解决 firefox 点击放大出现虚线框,从而导致滚动条的问题 */
.CRselectBox a {
outline: none;
text-decoration:none;
}
.CRselectBox a:focus {
outline: none;
text-decoration:none;
}
</style>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//鼠标滑动,改变当前div的样式
$(".CRselectBox").hover(function() {
$(this).addClass("CRselectBoxHover");
}, function() {
$(this).removeClass("CRselectBoxHover");
});
//点击字段,显示列表
$(".CRselectValue").click(function() {
$(this).blur();
$(".CRselectBoxOptions").show();
return false;
});
//点击某一选中A标签时,赋值。
$(".CRselectBoxItem a").click(function() {
$(this).blur();
//获取当前标签的rel值
var value = $(this).attr("rel");
//获取当前a标签的内容
var txt = $(this).text();
//记录当前选中值的rel值
$("#abc").val(value);
//记录当前选中值的内容
$("#abc_CRtext").val(txt);
//改变显示内容
$(".CRselectValue").text(txt);
//改变选中样式
$(".CRselectBoxItem a").removeClass("selected");
$(this).addClass("selected");
//隐藏列表
$(".CRselectBoxOptions").hide();
//记录当前选中项的rel,为键盘操作服务
$(".CRselectValue").attr("rel", $(this).attr("rel"));
return false;
});
/*点击任何地方关闭层*/
$(document).click(function(event) {
if ($(event.target).attr("class") != "CRselectBox") {
$(".CRselectBoxOptions").hide();
}
});
/*===================Test========================*/
$("#test").click(function() {
var value = $("#abc").val();
var txt = $("#abc_CRtext").val();
alert("你本次选择的值和文本分别是:" + value + " , " + txt);
});
//调用键盘操作
UpOrDown();
})
//方向键控制上下翻动
function UpOrDown() {
$(".CRselectValue").keydown(function(e) {
//获取上一个选中项的rel
var a = parseInt($(".CRselectValue").attr("rel"));
//判断下方向键
if (e.keyCode == 40) {
//当在CRselectValue获取焦点时,按下方向键,显示列表
$(".CRselectBoxOptions").show();
//计算下一个选中项
var b = a + 1;
var c = b.toString();
//当下一个项为最后一个时,选中第一个
if (a >= 6) {
//让显示记录的rel变为1
$(".CRselectValue").attr("rel", 1);
//让第一个显示选中样式
$("a[rel=1]").addClass("selected");
//让最后一个失去样式
$("a[rel=6]").removeClass("selected");
} else {
//让上一个失去样式
$("a[rel=" + a.toString() + "]").removeClass("selected");
//让下一个显示样式
$("a[rel=" + c + "]").addClass("selected");
//给显示值的a标签赋给rel值,作为记录,以便知道上一次选中项
$(".CRselectValue").attr("rel", c);
}
//给其他记录赋值
setValue();
return false;
}
//判断上方向键
if (e.keyCode == 38) {
//显示下拉列表
$(".CRselectBoxOptions").show();
//计算上一个选择项
var b = a - 1;
var c = b.toString();
//判断是否为第一个
if (b <= 0) {
//赋给最后一个值
$(".CRselectValue").attr("rel", 6);
//最后一项选中
$("a[rel=6]").addClass("selected");
//第一项失去样式
$("a[rel=1]").removeClass("selected");
} else {
//上一次选中项失去样式
$("a[rel=" + a.toString() + "]").removeClass("selected");
//向上移
$("a[rel=" + c + "]").addClass("selected");
//记录本次选中项
$(".CRselectValue").attr("rel", c);
}
//给其他项赋值
setValue();
return false;
}
//当回车时,把当前选中项赋给显示,影藏列表
if (e.keyCode == 13) {
//获取当前选中值
var txt = $("a[rel=" + a.toString() + "]").not($(".CRselectValue")).text();
//赋给显示
$(".CRselectValue").text(txt);
//存储rel值
$("#abc").val(a);
//存储显示值
$("#abc_CRtext").val(txt);
//影藏列表
$(".CRselectBoxOptions").hide();
return false;
}
});
}
function setValue() {
//获取当前选中项rel
var a = parseInt($(".CRselectValue").attr("rel"));
//根据rel取得当前选中项的内容,注意去除显示项的内容
var txt = $("a[rel=" + a.toString() + "]").not($(".CRselectValue")).text();
//为显示项更换内容
$(".CRselectValue").text(txt);
//存储当前选择项的rel
$("#abc").val(a);
//存储当前选择项的内容,以后使用
$("#abc_CRtext").val(txt);
return false;
}
</script>
</head>
<body>
<div class="CRselectBox">
<input type="hidden" value="" name="abc" id="abc" />
<!-- hidden 用来代替select的值 -->
<input type="hidden" value="" name="abc_CRtext" id="abc_CRtext" />
<!-- hidden 用来代替select的文本-->
<a class="CRselectValue" href="#" rel="0">选项一</a>
<ul class="CRselectBoxOptions">
<li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li>
<li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li>
<li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li>
<li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li>
<li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li>
<li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
总的来说,jQuery模拟select效果提供了一种灵活的方式来定制下拉菜单,使得我们可以更自由地控制其外观和交互。通过深入理解HTML、CSS和jQuery,你可以构建出更复杂、更符合用户体验的模拟select组件。
* 模拟select * @param {box,tiggle} * @param box 父级别容器[模拟select最外围标签] * @param tiggle 展开事件 [*click | mouseover | 其他dom事件] * @return object 返回对象本身 * @disription 节点(html)内部...
"jQuery模拟select下拉框插件"就是这样一个工具,它提供了更丰富的交互性和定制性,相比原生的HTML下拉框控件,能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先,原生的`<select...
本压缩包提供了一种使用jQuery模拟Select下拉菜单的方法,它不仅可以实现基本的下拉功能,还能增强用户体验,如添加动画效果、自定义样式等。 jQuery是一款轻量级的JavaScript库,它的目标是使JavaScript编程变得更...
下面是一个简单的示例,展示如何使用jQuery模拟select选择框: 1. 创建HTML结构: ```html ;"> 选项1 选项2 选项3 ``` 2. 使用jQuery添加事件监听器和处理逻辑: ```javascript $(document).ready(function() ...
在本文中,我们将深入探讨如何使用jQuery来模拟一个具有选中效果和搜索功能的Select下拉菜单,这在多选场景中非常有用。 首先,我们需要理解原生HTML的`<select>`元素及其`<option>`子元素。`<select>`用于创建一个...
要基于Jquery模拟Select,我们首先需要创建一个HTML结构,用于替换原生的Select元素。这个结构通常包含一个隐藏的Select元素(保留其数据和功能),以及一组可以点击的li元素(每个li对应Select的一个option)。以下...
本文将详细讲解如何使用jQuery模拟Select下拉框,并结合Tip提示功能,提升用户体验。这个实例中,开发者创建了一个自定义的jQuery插件,用于替代原生的HTML `<select>` 元素,同时集成了qTip插件,为模拟的Select...
这个"jQuery模拟select下拉框三级城市联动代码.zip"压缩包提供的就是一个使用jQuery库来实现这种效果的示例。这里我们将深入探讨相关知识点。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...
本文将详细探讨如何使用jQuery模拟select,并介绍两个流行的插件:Select2和Chosen。 首先,传统的HTML select元素虽然功能齐全,但在样式定制和用户体验方面往往显得较为局限。为了提升网页的交互性和美观度,...
jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化
二、模拟select表单 在HTML5中,虽然 `<select>` 元素提供了下拉菜单功能,但其样式控制有限,且无法实现复杂的交互。使用jQuery,我们可以创建自定义的HTML结构(如`<div>`)来模拟这种选择行为。这包括创建可点击...
这个“jquery搜索垂直模拟select下拉效果”是一个基于jQuery实现的功能,它为传统的HTML `<select>` 元素提供了更为友好和功能丰富的用户体验。 传统的HTML `<select>` 元素在某些情况下可能无法满足现代网页设计的...
在实际应用中,模拟Select下拉框的优势在于可以自定义样式、增加交互效果以及更好地兼容不同浏览器。但需要注意的是,对于大量选项的下拉列表,原生的Select元素由于浏览器优化可能会有更好的性能表现。 总结来说,...
本资源“jQuery模拟select下拉框多选和单选插件.zip”提供了一种利用jQuery实现模拟下拉框选择功能的方法,特别适合在网页中创建具有多选和单选功能的下拉菜单,而无需使用原生的`<select>`元素。这样的插件对于提升...
1. **模拟下拉选择框**: 插件通过创建额外的HTML结构来模拟select元素的外观,使其更符合现代Web设计的风格和交互需求。 2. **兼容性**: 插件支持主流浏览器,并对特定浏览器的样式进行调整,以消除兼容性问题。 3. ...
总之,这款jQuery模拟select下拉框多选和单选插件是网页开发中的一个实用工具,它通过良好的视觉设计和用户体验改进,提高了网页的交互性和专业性。在实际项目中,开发者可以根据需求对其进行配置和扩展,以满足各种...