Mention.js 教程

2026-01-17 09:19:41作者：董灵辛Dennis

本教程将引导您了解Jakiestfu创建的Mention.js，这是一个轻量级的插件，用于在Twitter Bootstrap的Typeahead插件上添加@提及用户的功能。让我们逐步探索该项目的目录结构、启动文件以及配置选项。

1. 项目目录结构

.
├── demo                  # 示例代码和演示页面
│   └── index.html        # 演示HTML文件
├── mention.js            # 主要的JavaScript文件
├── recommended-styles.css # 推荐使用的样式文件
├── README.md             # 项目说明文件
└── bootstrap-typeahead.js # Twitter Bootstrap的Typeahead插件（依赖项）

demo: 包含演示应用的源码和HTML文件。
mention.js: 提供@提及功能的核心JavaScript文件。
recommended-styles.css: 为使用Mention.js提供美观样式的推荐CSS文件。
README.md: 项目的基本信息和安装指南。
bootstrap-typeahead.js: Mention.js依赖的Bootstrap Typeahead库。

2. 项目启动文件

Mention.js的主要入口是mention.js文件。在您的网页中，需要引入jQuery、Bootstrap的Typeahead插件和Mention.js，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mention.js Example</title>

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- 引入Bootstrap的Typeahead CSS -->
    <link rel="stylesheet" href="bootstrap-typeahead.css">

    <!-- 引入推荐的Mention.js样式 -->
    <link rel="stylesheet" href="recommended-styles.css">
</head>
<body>
    ...
    <!-- 在需要的textarea元素中应用Mention.js -->
    <textarea id="textarea"></textarea>

    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <!-- 引入Bootstrap的Typeahead JS -->
    <script src="bootstrap-typeahead.js"></script>

    <!-- 引入Mention.js -->
    <script src="mention.js"></script>

    <!-- 初始化Mention.js -->
    <script>
        $(document).ready(function(){
            $.getJSON('fetch.php', function(data){
                $("#textarea").mention({
                    users: data
                });
            });
        });
    </script>
</body>
</html>

启动文件中，核心部分是jQuery的$(document).ready()函数，它确保当DOM加载完成后，初始化Mention.js。

3. 项目的配置文件

Mention.js通过传递一个配置对象到$.fn.mention方法来设置参数。以下是一些关键配置选项：

users: 必需，接受一个数组，表示可供提及的用户数据。每个用户对象至少应包含name和username属性。
display: 可选，自定义用户显示模板，默认为'<img src="{{image}}" /> {{name}}'。
match: 可选，自定义匹配逻辑，默认为不区分大小写的前缀匹配。
update: 可选，当提到的用户被选择时调用的回调函数，传入收集到的数据作为参数。

例如：

$("#textarea").mention({
    users: [
        { name: 'John Doe', username: 'john_doe', image: 'user1.jpg' },
        { name: 'Jane Smith', username: 'jane_smith', image: 'user2.jpg' }
    ],
    template: function(option) {
        return '@' + option.name;
    },
    match: function(word, option) {
        return option.username.toLowerCase().startsWith(word.toLowerCase());
    },
    update: function(collectedData) {
        console.log(collectedData);
    }
});