分享一个 @user 前端插件

开源地址:https://github.com/yuezhongxin/Mention.js

插件效果:类似于微博或 github 中 @user 列表效果。

这是个二次开发的插件,花了几天时间,对 Mention.js(作者 jakiestfu) 进行了一些改进,主要是下面几个方面:

  • 增加 search 自定义:可以根据输入的 @user-key,进行后台动态查询。
  • 增加 textarea 跟踪焦点:效果是用户列表跟踪在 textarea 输入焦点,而不是在 textarea 底部,主要使用 textarea-caret-position.js 插件(用来获取 textarea 当前焦点坐标)。
  • 增加 under 选项:是否跟踪焦点,默认为 false。
  • 完善 matcher:主要是判断是否要 search,比如 textarea 输入内容,如何进行判断查询并显示结果列表。
  • 增加 simple:去除 bootstrap 的一些样式效果,简单化。
  • 增加 select 值后增加空格。
  • 增加 fixed 选项:是否固定列表,默认为 false。
  • 若干改进。

下面是四种配置和效果展示。

1. 默认效果

配置代码:

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention-typeahead.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention.js"></script>
    <script type=‘text/javascript‘ src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search
                }
            });
        });

        function search(key) {
            //在这里可以写后台查询代码
            var data = [{
                name: ‘Rob Dyrdek‘,
                image: ‘http://placekitten.com/25/24‘
            }, {
                name: ‘Rick Bahner‘,
                image: ‘http://placekitten.com/25/23‘
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>

2. 列表跟随焦点

配置代码:

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention-typeahead.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention.js"></script>
    <script type=‘text/javascript‘ src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search,
                    under: true
                }
            });
        });

        function search(key) {
            //在这里可以写后台查询代码
            var data = [{
                name: ‘Rob Dyrdek‘,
                image: ‘http://placekitten.com/25/24‘
            }, {
                name: ‘Rick Bahner‘,
                image: ‘http://placekitten.com/25/23‘
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>

3. 简化风格

配置代码:

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention-simple.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention-typeahead.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention.js"></script>
    <script type=‘text/javascript‘ src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search,
                    under: true
                }
            });
        });

        function search(key) {
            //在这里可以写后台查询代码
            var data = [{
                name: ‘Rob Dyrdek‘,
                image: ‘http://placekitten.com/25/24‘
            }, {
                name: ‘Rick Bahner‘,
                image: ‘http://placekitten.com/25/23‘
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>

4. 固定列表

配置代码:

<body>
    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention-simple.css">
    <script src="../scripts/jquery-1.10.2.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention-typeahead.js"></script>
    <script type=‘text/javascript‘ src="../scripts/mention.js"></script>
    <script type=‘text/javascript‘ src="../scripts/textarea-caret-position.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#full").mention({
                typeaheadOpts: {
                    search: search,
                    under: true,
                    fixed: true
                }
            });
        });

        function search(key) {
            //在这里可以写后台查询代码
            var data = [{
                name: ‘Rob Dyrdek‘,
                image: ‘http://placekitten.com/25/24‘
            }, {
                name: ‘Rick Bahner‘,
                image: ‘http://placekitten.com/25/23‘
            }];
            console.log("key:" + key);
            return data;
        }
    </script>
</body>
时间: 2024-10-29 19:08:04

分享一个 @user 前端插件的相关文章

分享一个Jquery 分页插件 Jquery Pagination

分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接拿着各种插件用,想偷懒的同学们也可以用用看: Jquery Pagination 大家可以去这里查看下演示:http://www.xuetub.com/plugin/jquery/221 使用方法也比较简单: <div id="page2" class="m-paginat

前端插件@user

分享一个 @user 前端插件 开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是个二次开发的插件,花了几天时间,对 Mention.js(作者 jakiestfu) 进行了一些改进,主要是下面几个方面: 增加 search 自定义:可以根据输入的 @user-key,进行后台动态查询. 增加 textarea 跟踪焦点:效果是用户列表跟踪在 textarea 输入焦点,而不是在 t

分享一个jquery功能强大的提示信息插件代码

代码属于提示文字特效,很好,使用有些复杂,请参demo使用 下载地址:jquery功能强大的提示信息插件代码 预览DEMO:DEMO 分享一个jquery功能强大的提示信息插件代码,布布扣,bubuko.com

分享一个jquery插件,弥补一下hover事件的小小不足

hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好. 易迅的菜单就没有这个问题 delayHover来解决这个问题 啥也不说了先看调用---------- 调用方式: var duration = 500;// 延迟500毫秒 $('#div1').delayHover(function

[Dynamic Crm] 分享一个方便获取实体名字,GUID,字段名字的插件

[Dynamic Crm] 分享一个方便获取实体名字,GUID,字段名字的插件 1. 打开IE收藏夹目录C:\Users\kcom\Favorites 2. 添加Debug mode 到Favorites 3. 打开CRM任意实体,使用快捷键Ctrl +i 4.点击  Debug mode Debug Mode :http://files.cnblogs.com/files/KingK/DebugMode.zip

分享一个搭建流量频道的经历

最近接触了一个很小众的行业,行业本身的搜索流量很小.朋友来问我SEO该怎么做. 于是有了这次经历,目前各项数据都还在测试观察中.好了开始. 仔细研究了一下他所在的行业,发现虽然是一个新兴的小众的行业,但是能跟娱乐类的信息扯上关系.于是准备搭建一个明星资料库来引入一批流量.由于这个朋友是技术出身,技术也比较牛,于是几乎把想到的东西都实现了. 首先从词库入手,既然是搭建明星资料库,那么从获取明星名字开始,这个从很多软件或者网站上都能够直接跑出来!经过对部分歌手的抽样分析,发现稍微热门一点的歌手,基本

分享一个PHP调用RestFul接口的函数

php越来越前端化,大型系统中的php经常是调用后端服务的接口,这里分享一个函数.希望对大家有用. /** * [http 调用接口函数] * @Date 2016-07-11 * @Author GeorgeHao * @param string $url [接口地址] * @param array $params [数组] * @param string $method [GET\POST\DELETE\PUT] * @param array $header [HTTP头信息] * @par

分享一个自己用的基于mvc编程工作管理

前言: 最近在家没事学习下mvc,正好把以前用webform写的一个帮助自己编码的工具重构成了mvc,另外根据自己的编程工作感悟添加了公司常用软件维护 ,数据库操作记录这些新功能. 技术没什么高深的技术,就是mvc+jquery easyUi+简单的三层,生成文档的模板引擎用的Razor. 主要还是解决沟通成本太高的问题,都是根据工作中遇到的问题慢慢解决的,至少很多功能可以解决小型软件团队很多流程问题,自己摸索真是又痛苦又快乐.相信也有很多朋友和我一样没有去过大型软件公司,很多问题只能看别人的文

前端插件库【原】 2016-08-21

自己整理的一些质量还可以的前端插件,各种分类的都有,工作中需要用到插件时可以在下面的列表中查找. 1.幻灯片 Camera    a free jQuery slideshow by Pixedelic http://www.pixedelic.com/plugins/camera/ FlexSlider2    An awesome, fully responsive jQuery slider toolkit http://flexslider.woothemes.com/ Flickity