Mention.js 教程
本教程将引导您了解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);
}
});
以上就是关于Mention.js的简要教程,希望对您在实现@提及功能时有所帮助。更多信息可参考项目的README.md文件。