分享一个 @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. poj 3250 Bad Hair Day (单调栈）

    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14883   Accepted: 4940 Des ...

  2. POJ 3100 &amp; ZOJ 2818 &amp; HDU 2740 Root of the Problem(数学)

    题目链接: POJ:id=3100" style="font-size:18px">http://poj.org/problem? id=3100 ZOJ:http ...

  3. 局域网连接SQL Server数据库配置

    首先要保证两台机器位于同一局域网内,然后打开配置工具→SQL Server配置管理器进行配置.将MSSQLSERVER的协议的TCP/IP的(IP1.IP2)TCPport改为1433,已启用改为是. ...

  4. 一个简单的java僵局演示示例

    在实际编程,为了避免死锁情况,但是,让你写一个有用的程序死锁似几乎不要太简单(种面试题),下面是一个简单的死锁样例. 线程的同步化可能会造成死锁,死锁发生在两个线程相互持有对方正在等待的东西(实际是两 ...

  5. facade pattern

    外观模式是一种使用频率非常高的设计模式,它通过引入一个外观角色来简化客户端与子系统之间的交互,为复杂的子系统调用提供一个统一的入口,使子系统与客户端的耦合度降低,且客户端调用非常方便.外观模式并不给系 ...

  6. 安卓反汇编工具arm-eabi-objdump

    安卓反汇编工具 在Arm平台系统自带的反编译工具在android/prebuild/linux-/toolchail/arm-abil-/bin目录下的arm_eabi-objdump进行反汇编 ar ...

  7. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  8. C++笔试面试总结

    手游广州某公司书面今天接受采访时.刚进去中午1中场休息.他们公司谁刚刚醒来,一个冷漠打牌,然后去上班.瞬间,这些公司有没有什么好印象,压抑. 接着快2点的时候.发了一份笔试题.大部分题目均在网上的&l ...

  9. JAVA基础编程50题（10-12题）具体解释

    一.描写叙述 1.一球从m米高度自由落下.每次落地后反跳回原高度的一半:再落下,求它在 第n次落地时.共经过多少米?第10次反弹多高? 2.有1.2.3.4个数字.能组成多少个互不同样且无反复数字的三 ...

  10. 【Linux探索之旅】第一部分第五课：Unity桌面，人生若只如初见

    内容简介 1.第一部分第五课:Unity桌面,人生若只如初见 2.第一部分第六课预告:Linux如何安装在虚拟机中 Unity桌面,人生若只如初见 不容易啊,经过了前几课的学习,我们认识了Linux是 ...