文档章节

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

陈袁at互联
 陈袁at互联
发布于 2014/07/10 21:48
字数 999
阅读 245
收藏 7

模仿写一个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);

效果图:

虽然代码非常的简单, 但也是我第一次这么认真的写JS代码. 以后还是得前后坚固才行. 

© 著作权归作者所有

陈袁at互联
粉丝 54
博文 41
码字总数 26406
作品 0
深圳
高级程序员
私信 提问
悟透JavaScript (强烈推荐)

引子 编程世界里只存在两种基本元素,一个是数据,一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。 数据天生就是文静的,总想保持自己固有的本色;而代码却天...

lvzjane
2013/07/14
621
2
7个常见Javascript框架介绍

设计开发中的“框架”指一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。通俗的讲,框...

Junn
2012/09/16
228
0
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

智捷课堂
2015/03/17
43
0
js prototype的理解

prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。prototype就是“一个给类的对象添加方法的方法”,使用prototype属性,可以给类动态地添加方法,以便在JavaScript中实现“...

别人说我名字很长
2014/05/15
4.7K
0
JS前台工程师

JS前台工程师 职位描述: 1、设计并编写WEB前端架构及应用 2、配合界面设计师完成各种javascript代码需求 职位要求: 1、精通JavaScript语言,并且仔细研究过至少一种开源框架(JQuery, Pro...

prodikeys
2011/12/14
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

c++ 内联函数调用快的原因

见图片分析

天王盖地虎626
42分钟前
4
0
JS--function

一、声明提前(hoist) 在js程序开始执行前,引擎会查找所有var声明的变量和function声明的函数,集中到当前作用域顶部集中创建,赋值留在原地 二、三种创建函数的方式 1、声明方式创建函数-...

wytao1995
今天
5
0
微服务之间调用控制器注解类型的差异

今天在一个业务服务通过Feign调用文件服务上传文件时遇到了几个问题: 1. 提示http请求头过大的问题; 此时需要修改bootstrap.yml,加入 server: max-http-header-size: 10000000 用以放大...

不再熬夜
今天
7
0
用 4G 工作是什么体验

七月开始,因为工作原因,在公司附近租了个住处,方便工作。离公司近了,感觉就是不一样,之前每天 5:30 就要起床赶地铁,现在可以睡到自然醒,一看才 7 点,悠闲的起床洗漱,踱步到公司,都...

zzxworld
今天
6
0
sonar报错volatile

问题发生 原先代码如下: //认证授权码private static volatile String AUTHORIZATION_CODE = "init"; git push 之后,sonar认为这是个bug检测报告截图如下: 分析排查 解释说明: Markin...

开源小菜鸟2333
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部