jQuery Mentions 使用教程

jQuery Mentions 使用教程

jquery-mentionsAdds mentioning support to your text fields.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-mentions

项目介绍

jQuery Mentions 是一个轻量级的 UI 组件，允许用户在文本消息中通过 "@mention" 提及某人，类似于 Facebook 或 Twitter 上的功能。该项目由 Kenneth Auchenberg 编写，最初作为 Podio 的内部项目，后来开源以供社区使用。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/ivirabyan/jquery-mentions.git

引入依赖

在 HTML 文件中引入 jQuery 和 jQuery Mentions 的脚本：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery-mentions/jquery.mentions.js"></script>
<link rel="stylesheet" href="path/to/jquery-mentions/jquery.mentions.css">

初始化

在页面加载完成后，初始化 jQuery Mentions：

<textarea id="mention-input"></textarea>
<script>
  $(document).ready(function() {
    $('#mention-input').mentionsInput({
      onDataRequest: function(mode, query, callback) {
        var data = [
          { id: 1, name: 'John Doe', 'avatar': 'https://example.com/avatar1.jpg', 'type': 'user' },
          { id: 2, name: 'Jane Smith', 'avatar': 'https://example.com/avatar2.jpg', 'type': 'user' }
        ];

        data = data.filter(function(item) {
          return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });

        callback.call(this, data);
      }
    });
  });
</script>

应用案例和最佳实践

案例一：社交媒体评论

在社交媒体平台上，用户可以在评论中提及其他用户，增加互动性。例如：

<textarea id="social-comment"></textarea>
<script>
  $(document).ready(function() {
    $('#social-comment').mentionsInput({
      onDataRequest: function(mode, query, callback) {
        // 模拟从服务器获取用户数据
        var data = [
          { id: 1, name: 'Alice', 'avatar': 'https://example.com/alice.jpg', 'type': 'user' },
          { id: 2, name: 'Bob', 'avatar': 'https://example.com/bob.jpg', 'type': 'user' }
        ];

        data = data.filter(function(item) {
          return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });

        callback.call(this, data);
      }
    });
  });
</script>

案例二：项目协作工具

在项目协作工具中，团队成员可以在任务描述或评论中提及其他成员，以便快速通知和分配任务。例如：

<textarea id="project-task"></textarea>
<script>
  $(document).ready(function() {
    $('#project-task').mentionsInput({
      onDataRequest: function(mode, query, callback) {
        // 模拟从服务器获取团队成员数据
        var data = [
          { id: 1, name: 'Team Member 1', 'avatar': 'https://example.com/member1.jpg', 'type': 'user' },
          { id: 2, name: 'Team Member 2', 'avatar': 'https://example.com/member2.jpg', 'type': 'user' }
        ];

        data = data.filter(function(item) {
          return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });

        callback.call(this, data);
      }
    });
  });
</script>

典型生态项目

项目一：jQuery UI Autocomplete

jQuery Mentions 依赖于 jQuery UI Autocomplete，用于提供自动完成功能。可以通过以下方式引入：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

项目二：Underscore.js

jQuery Mentions 还依赖于 Underscore.js，用于简化数据处理。可以通过以下方式引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>

通过结合这些生态项目，可以进一步增强 jQuery Mentions 的功能和性能。

jquery-mentionsAdds mentioning support to your text fields.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-mentions