分享一个 @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>

前端插件@user的更多相关文章

  1. Django之前端插件定制之表头

    什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写 ...

  2. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  3. 前端插件之Select2使用

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...

  4. 前端插件之Datatables使用--上篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,前边两篇分别介绍了Duallistbox插件和Select2插件的使用,这一篇开始Databases的征服之旅 D ...

  5. 前端插件之Datatables使用--下篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...

  6. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  7. VScode前端插件推荐

    工欲善其事,必先利其器,安利一波前端插件. Chinese (Simplified) Language Pack for Visual Studio CodeVScode汉化插件 Beautify代码 ...

  8. sublime text3 前端插件介绍

    Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法:输入标签简写形式,然后按Tab键 关于Emmet的更多介绍 ...

  9. VScode常用几个前端插件live HTML previewer和debugger for chrome的配置

    之前一直都是用sublime Text和chrome配合来写前端的页面,自从知道了有liveReload这个神奇的插件之后感觉爽翻了啊.好吧跑远了........ 话说最近微软搞了个VScode,听说 ...

随机推荐

  1. 直接插入排序、折半插入排序、Shell排序、冒泡排序，选择排序

    一.直接插入排序 稳定,时间复杂度:最好O(n).最差O(n^2).平均O(n^2).空间复杂度O(1) void InsertSort(int L[], int n) { int i, j,key; ...

  2. siwft初学（一）

    今天刚開始学习swift语言.首先须要下载xcode6 beta版本号.正式版本号然后会公布.自己学习总结一下,假设有误.请大家指出. 创建project的时候.language选择swift语言. ...

  3. hadoop版本号变迁

    近期在研究hadoop时,发现hadoop的版本号非常混乱.原来的版本号都说0.X.X開始,后来发现有1.X.X和2.X.X 这样就不太清楚了. 0.20.2版本号曾经(不含该版本号)的配置文件都在d ...

  4. 如何判断一个Http Message的结束——python源码解读

    HTTP/1.1 默认的连接方式是长连接,不能通过简单的TCP连接关闭判断HttpMessage的结束. 以下是几种判断HttpMessage结束的方式: 1.      HTTP协议约定status ...

  5. Iphone CodeSign error: no provisioning profile at path 错

    今天在退房手续,变化了profile,当再次进行整理编译项目时.就出现了这个问题,在xCode 6 开发环境下出现了, 出现这个错误提示Code Sign error: Provisioning pr ...

  6. android 4.0 中出错 java.lang.UnsupportedOperationException

    在android4.0中  画图的时候使用: canvas.clipPath(path, Region.Op.XOR); 报错 java.lang.UnsupportedOperationExcept ...

  7. IOS设计模式学习（11）中介者

    1 前言 面向对象的设计鼓励把行为分散到不同对象中.这种分散可能导致对象之间的相互关联.在最糟糕的情况下,所有对象都彼此了解并相互操作.但是增加的相互关联又减少了获得的益处.增加的关联似的对象很难或不 ...

  8. Directx11学习笔记【十七】纹理贴图

    本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5596180.html 在之前的例子中,我们实现了光照和材质使得场景 ...

  9. openGL研究钞四 ： 关于颜色， 尺寸， 虚线， 多边形逆转， 空洞， 使用位图

    转载请保留源,,,,hushuai1992http://blog.csdn.net/u013642494/article/category/2675731 额. 这个标题我都不知道该怎么起了. 假设没 ...

  10. C#并行编程

    C#并行编程中的Parallel.Invoke 一.基础知识 并行编程:并行编程是指软件开发的代码,它能在同一时间执行多个计算任务,提高执行效率和性能一种编程方式,属于多线程编程范畴.所以我们在设计过 ...