初次用prototype的形式编写JS代码

最新推荐文章于 2025-08-13 21:05:35 发布

??yy

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 5g ViewUI

原文链接：https://my.oschina.net/vernon/blog/289555

本文介绍了一个简单的ListBox功能实现，通过JavaScript和CSS实现了下拉列表框的基本功能，包括样式设置、键盘导航和鼠标悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿写一个listbox的功能, 这里只完成部分的功能. 因为完整的应该是与服务端交互, 根据搜索的关键进行匹配. 然后可以利用键盘或者鼠标来选择推荐出来的内容. 这里只实现选择的功能. 只要是JS部分的代码.

第一步: CSS代码

.ac-renderer {
    width: 600px;
    top: 33px;
    left: 1px;
    position: absolute;
    top: 35px;
    left: 1px;
    z-index: 10;
    background: #fff;
    border: solid 1px #999\0;
    border: 0 none rgba(0,0,0,0);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.5);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.ac-row {
    cursor: pointer;
    padding: 8px;
    zoom: 1;
    clear: both;
}

.ac-renderer>.ac-row:first-child {
    border-radius: 5px 5px 0 0;
}

.ac-active {
    background-color: #d6e9f8;
}


.ac-row .zm-item-img-avatar {
    margin: 2px 10px 0 0;
    width: 25px;
    height: 25px;
}

.zm-item-img-avatar {
    border-radius: 2px;
}

.zg-left {
    float: left;
}

.autocomplete-row-name {
    margin: 0 0 1px 35px;
    display: block;
    line-height: 1.2;
    height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zu-autocomplete-row-description {
    color: #999;
    display: block;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 14px;
    height: 14px;
    zoom: 1;
}

第二步: 页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../main/js/global/jquery/1.8/jquery-1.8.1.js"></script>
    <script src="../../../main/plugin/listbox/jquery.listbox.js"></script>
    <link rel="stylesheet" href="../../../main/plugin/listbox/listbox.css"/>
</head>

<body>

<center>
    <div>
        <input id="box" type="text" value="" placeholder="输入关键字"/>
    </div>
</center>

<script>
    var this$ = $('#box');
    var html = [
        '<div class="ac-row ac-active active" id=":3g" role="option" style="-webkit-user-select: none;">',
        '<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">',
        '<span title="足球" style="-webkit-user-select: none;">足球1111</span>',
        '<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">',
        '又称<b style="-webkit-user-select: none;">s</b>occer，222955 人关注',
        '</span>',
        '</div>',

        '<div id=":4g" role="option" style="-webkit-user-select: none;">',
        '<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">',
        '<span title="足球" style="-webkit-user-select: none;">足球22222</span>',
        '<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">',
        '又称<b style="-webkit-user-select: none;">s</b>occer，222955 人关注',
        '</span>',
        '</div>',

        '<div id=":5g" role="option" style="-webkit-user-select: none;">',
        '<img class="zm-item-img-avatar zg-left" src="310d85e8d_m.jpg" style="-webkit-user-select: none;">',
        '<span title="足球" style="-webkit-user-select: none;">足球33333</span>',
        '<span class="zg-gray-normal zu-autocomplete-row-description" style="-webkit-user-select: none;">',
        '又称<b style="-webkit-user-select: none;">s</b>occer，222955 人关注',
        '</span>',
        '</div>'
    ].join('');

    var options = {
        width: 300,
        bodyHtml: html,
        target: this$,
        targetWrap: this$.parent(),
        afterSelected: function (value) {
            alert(value.html());
        }
    };
    var listBoxUtil = new ListBoxUtil(options);
    listBoxUtil.init();
</script>
</body>
</html>

第三步: 核心JS代码

(function ($) {

    ListBoxUtil = function (options) {
        this.options = options || {};
        this.target = null;
        this.targetWrap = null;
        this.width = 600;
        this.top = 0;
        this.left = 0;
        this.id = "listbox";
        this.bodyHtml = "";
        this.currentIndex = 0;
        this.callFunction = null;
        var html = [
                '<div class="ac-renderer" role="listbox" id="' + this.id + '" style="-webkit-user-select: none;">',
            '</div>'
        ].join('');
        this.listbox = $(html);
    };

    ListBoxUtil.prototype.init = function () {
        var this$ = this;
        this$.setConfig();
        this$.mouseHover();
        this$.keyup();
        this$.bindClick();
        this$.target.on('focus', function () {
            this$.show();
        }).on('blur', function () {
            setTimeout(function () {
                this$.hide()
            }, 150);
        });
    };

    ListBoxUtil.prototype.setConfig = function () {
        if (this.options != null) {
            if (this.options['target']) {
                this.target = this.options['target'];
            }
            if (this.options['targetWrap']) {
                this.targetWrap = this.options['targetWrap'];
            }
            if (this.options['width']) {
                this.listbox.width(this.options['width']);
            }
            if (this.options['bodyHtml']) {
                this.listbox.append(this.options['bodyHtml']);
            }
            if (this.options['left']) {
                this.listbox.left(this.options['left']);
            } else {
                this.listbox.css("left", this.target.offset().left);
            }
            if (this.options['top']) {
                this.listbox.top(this.options['top']);
            } else {
                this.listbox.css("top", this.target.offset().top + this.target.height() + 10);
            }
            if (this.options['callFunction']) {
                this.callFunction = this.options['callFunction'];
            }
            this.targetWrap.append(this.listbox);
        }
    };

    ListBoxUtil.prototype.mouseHover = function () {
        var this$ = this;
        this.listbox.children().hover(
            function () {
                this$.listbox.children().removeClass('ac-active active');
                $(this).addClass("ac-active active");
                //
            }
        );
    };

    ListBoxUtil.prototype.keyMove = function (e) {
        var listChild = this.listbox.children().removeClass("ac-active active");
        // 向上
        if (e.keyCode == 38) {
            if (this.currentIndex > 0) {
                this.currentIndex--;
            } else {
                this.currentIndex = listChild.length - 1;
            }
        }
        // 向下
        else if (e.keyCode == 40) {
            if (this.currentIndex == listChild.length - 1) {
                this.currentIndex = 0;
            } else {
                this.currentIndex++;
            }
        }
        listChild.eq(this.currentIndex).addClass("ac-active active");
    };

    ListBoxUtil.prototype.hide = function () {
        this.listbox.hide();
    };

    ListBoxUtil.prototype.show = function () {
        this.listbox.show();
    };

    ListBoxUtil.prototype.bindClick = function () {
        var this$ = this;
        this$.listbox.children().on('click', function () {
            if (this$.options.afterSelected) {
                this$.options.afterSelected($(this));
            }
        });
    };

    ListBoxUtil.prototype.enter = function (e) {
        var this$ = this;
        var curentChild = this$.listbox.children().eq(this$.currentIndex);
        if (this$.options.afterSelected) {
            this$.options.afterSelected(curentChild);
        }
    };

    ListBoxUtil.prototype.keyup = function () {
        var this$ = this;
        this.target.on('keyup', function (e) {
            if (e.keyCode == 38 || e.keyCode == 40) {
                this$.keyMove(e);
            } else if (e.keyCode == 13) {
                this$.enter(e);
            }
        });
    };


})(jQuery);

效果图: