好友选择器是一种常用的 Web 开发组件，可以方便地让用户选择或搜索好友或联系人，并将选择结果提交至服务器。 基于 JQuery 的好友选择器 V2.0 是一种常见的好友选择器组件，本文将针对该组件，提供一份完整的攻略，旨在帮助大家快速完成开发。
一. 下载和安装基于 JQuery 的好友选择器
- 下载 JS 和 CSS 文件
在官网下载基于 JQuery 的好友选择器的 JS 和 CSS 文件。下载链接：https://www.jqueryscript.net/demo/jQuery-Friends-Selector-Plugin-V2/scripts/jquery.fs.selecter.js 和 https://www.jqueryscript.net/demo/jQuery-Friends-Selector-Plugin-V2/styles/jquery.fs.selecter.css
<!-- 加载好友选择器需要的 JS 和 CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fs.selecter.css">
<script type="text/javascript" src="jquery.fs.selecter.js"></script>
- 初始化好友选择器
// 初始化好友选择器
$('#friend-selector').fsSelecter({
name: 'friends',
items: ['Lucy', 'Tom', 'Jerry'],
searchField: true,
multipleSelect: true
});
二. 好友选择器的配置
可以在初始化好友选择器的时候，通过传递一个对象，对好友选择器进行配置，常用的配置选项有：
name: 选择的内容作为表单提交的名称。
$('#friend-selector').fsSelecter({
name: 'friends'
});
items: 选择的列表项。
$('#friend-selector').fsSelecter({
items: ['Lucy', 'Tom', 'Jerry']
});
searchField: 是否显示搜索框。
$('#friend-selector').fsSelecter({
searchField: true
});
multipleSelect: 是否支持多选。
$('#friend-selector').fsSelecter({
multipleSelect: true
});
三. 实例
示例一：基本的好友选择器
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fs.selecter.css">
<script type="text/javascript" src="jquery.fs.selecter.js"></script>
</head>
<body>
<label for="friend-selector">请选择好友：</label>
<select id="friend-selector">
<option>Lucy</option>
<option>Tom</option>
<option>Jerry</option>
</select>
<script type="text/javascript">
$('#friend-selector').fsSelecter({
name: 'friends'
});
</script>
</body>
</html>
示例二：带搜索框和多选的好友选择器
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fs.selecter.css">
<script type="text/javascript" src="jquery.fs.selecter.js"></script>
</head>
<body>
<label for="friend-selector">请选择好友：</label>
<select id="friend-selector" multiple="multiple">
<option>Lucy</option>
<option>Tom</option>
<option>Jerry</option>
<option>John</option>
<option>David</option>
<option>Mike</option>
</select>
<script type="text/javascript">
$('#friend-selector').fsSelecter({
name: 'friends',
items: ['Lucy', 'Tom', 'Jerry', 'John', 'David', 'Mike'],
searchField: true,
multipleSelect: true
});
</script>
</body>
</html>
以上示例代码在 HTML 网页中可以直接运行，选择器可以在浏览器中正常显示，选择和提交数据。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Jquery 好友选择器V2.0 - Python技术站
微信扫一扫 
支付宝扫一扫 