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

最新推荐文章于 2024-04-26 16:47:03 发布

gao0604

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.1k

点赞数 1

文章标签： function div javascript html button border

本文链接：https://blog.csdn.net/gao0604/article/details/6500737

版权

学校作业的问题，就在网搜了一下，找不到文本框模拟的（可能本人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="js/jquery-1.4.1.min.js">
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <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(images/select_button.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" οnclick="alert($('#test').serialize())">提交</button>
    </body>
</html>

用到的图片：

最后的效果：

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

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

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

最终效果：

gao0604

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
文本框模拟下拉列表效果，-jQuery

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

扫一扫