分享一个 @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。
  • 增加 sort 选项:是否进行排序,默认为 false。
  • 若干改进。

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

1. 默认效果

分享一个 @user 前端插件_第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. 列表跟随焦点

分享一个 @user 前端插件_第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. 简化风格

分享一个 @user 前端插件_第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. 固定列表

分享一个 @user 前端插件_第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 前端插件)