`
xinyao
  • 浏览: 98926 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery模拟select效果

jQueryCC++C#Firefox 
阅读更多
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服务器端分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery模拟select效果实现

    总的来说，jQuery模拟select效果提供了一种灵活的方式来定制下拉菜单，使得我们可以更自由地控制其外观和交互。通过深入理解HTML、CSS和jQuery，你可以构建出更复杂、更符合用户体验的模拟select组件。

    jquery模拟select

    * 模拟select * @param {box,tiggle} * @param box 父级别容器[模拟select最外围标签] * @param tiggle 展开事件 [*click | mouseover | 其他dom事件] * @return object 返回对象本身 * @disription 节点(html)内部...

    jQuery模拟select下拉框插件.zip

    "jQuery模拟select下拉框插件"就是这样一个工具，它提供了更丰富的交互性和定制性，相比原生的HTML下拉框控件，能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先，原生的`&lt;select...

    jQuery模拟Select下拉菜单选中添加代码.zip

    本压缩包提供了一种使用jQuery模拟Select下拉菜单的方法，它不仅可以实现基本的下拉功能，还能增强用户体验，如添加动画效果、自定义样式等。 jQuery是一款轻量级的JavaScript库，它的目标是使JavaScript编程变得更...

    jquery input文本框模拟select选择框获取选定

    下面是一个简单的示例，展示如何使用jQuery模拟select选择框： 1. 创建HTML结构： ```html ;"&gt; 选项1 选项2 选项3 ``` 2. 使用jQuery添加事件监听器和处理逻辑： ```javascript $(document).ready(function() ...

    jQuery模拟Select下拉菜单选中添加代码

    在本文中，我们将深入探讨如何使用jQuery来模拟一个具有选中效果和搜索功能的Select下拉菜单，这在多选场景中非常有用。 首先，我们需要理解原生HTML的`&lt;select&gt;`元素及其`&lt;option&gt;`子元素。`&lt;select&gt;`用于创建一个...

    基于Jquery模拟Select,解决IE显示问题

    要基于Jquery模拟Select，我们首先需要创建一个HTML结构，用于替换原生的Select元素。这个结构通常包含一个隐藏的Select元素（保留其数据和功能），以及一组可以点击的li元素（每个li对应Select的一个option）。以下...

    jquery模拟select,带tip提示

    本文将详细讲解如何使用jQuery模拟Select下拉框，并结合Tip提示功能，提升用户体验。这个实例中，开发者创建了一个自定义的jQuery插件，用于替代原生的HTML `&lt;select&gt;` 元素，同时集成了qTip插件，为模拟的Select...

    jQuery模拟select下拉框三级城市联动代码.zip

    这个"jQuery模拟select下拉框三级城市联动代码.zip"压缩包提供的就是一个使用jQuery库来实现这种效果的示例。这里我们将深入探讨相关知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件...

    Jquery 模拟 select

    本文将详细探讨如何使用jQuery模拟select，并介绍两个流行的插件：Select2和Chosen。 首先，传统的HTML select元素虽然功能齐全，但在样式定制和用户体验方面往往显得较为局限。为了提升网页的交互性和美观度，...

    jquery input text文本框模拟select框美化

    jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化

    jquery div模拟select表单地区选择三级联动美化效果

    二、模拟select表单 在HTML5中，虽然 `&lt;select&gt;` 元素提供了下拉菜单功能，但其样式控制有限，且无法实现复杂的交互。使用jQuery，我们可以创建自定义的HTML结构（如`&lt;div&gt;`）来模拟这种选择行为。这包括创建可点击...

    jquery搜索垂直模拟select下拉效果.zip

    这个“jquery搜索垂直模拟select下拉效果”是一个基于jQuery实现的功能，它为传统的HTML `&lt;select&gt;` 元素提供了更为友好和功能丰富的用户体验。 传统的HTML `&lt;select&gt;` 元素在某些情况下可能无法满足现代网页设计的...

    jquery 模拟Select下拉选择框取值功能.zip

    在实际应用中，模拟Select下拉框的优势在于可以自定义样式、增加交互效果以及更好地兼容不同浏览器。但需要注意的是，对于大量选项的下拉列表，原生的Select元素由于浏览器优化可能会有更好的性能表现。 总结来说，...

    jQuery模拟select下拉框多选和单选插件.zip

    本资源“jQuery模拟select下拉框多选和单选插件.zip”提供了一种利用jQuery实现模拟下拉框选择功能的方法，特别适合在网页中创建具有多选和单选功能的下拉菜单，而无需使用原生的`&lt;select&gt;`元素。这样的插件对于提升...

    JQuery SELECT单选模拟jQuery.select.js

    1. **模拟下拉选择框**: 插件通过创建额外的HTML结构来模拟select元素的外观，使其更符合现代Web设计的风格和交互需求。 2. **兼容性**: 插件支持主流浏览器，并对特定浏览器的样式进行调整，以消除兼容性问题。 3. ...

    jQuery模拟select下拉框多选和单选插件

    总之，这款jQuery模拟select下拉框多选和单选插件是网页开发中的一个实用工具，它通过良好的视觉设计和用户体验改进，提高了网页的交互性和专业性。在实际项目中，开发者可以根据需求对其进行配置和扩展，以满足各种...

Magicbox
Global site tag (gtag.js) - Google Analytics