表单/表格
Bootstrap tagsinput自定义标签插件
PetitQ
tagsinput 是一款基于 Bootstrap 的自定义标签插件。该自定义标签插件提供 api 接口，可以将 input 和 select 元素转换为标签。并能和 typehead.js 插件结合，提供查询提示信息。
使用方法
在页面中引入 jquery 和 bootstrap 相关文件 ，以及 tagsinput.css 和 tagsinput.js 文件。
也想出现在这里？联系我们吧
<link href="bootstrap.css" rel="stylesheet">
<link href="tagsinput.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="typehead.min.js"></script>
<script src="tagsinput.js"></script>
HTML 结构
使用<input>作为标签时，只需要添加 data-role="tagsinput"属性即可。
<input type="text" data-role="tagsinput" value="jQuery,Script,Net">
使用<select>元素作为标签时，需要添加 multiple data-role="tagsinput"属性。
<select multiple data-role="tagsinput">
<option value="jQuery">jQuery</option>
<option value="Angular">Angular</option>
<option value="React">React</option>
<option value="Vue">Vue</option>
</select>
初始化插件
你也可以动态的为 input 元素添加标签。
$('input').tagsinput('add', { "value": 1 , "text": "jQuery"});
$('input').tagsinput('add', { "value": 2, "text": "Script"});
$('input').tagsinput('add', { "value": 3, "text": "Net"});
配置参数
该响应式圆形 js 轮播图插件的可用配置参数如下：
| 参数 | 描述 | ||||
| tagClass | 标签的 class 名称，获者是一个返回 classname 的函数。
|
||||
| itemValue | 当使用对象作为标签时，itemValue 属性用于指明标签值的属性名称。
|
||||
| itemText | 当使用对象作为标签时，itemText 属性用于指明标签名称的属性名称。
|
||||
| confirmKeys | 用于在输入框输入标签时通过什么按键来输出标签。默认为[13, 188]，代表回车和 comma 键。
|
||||
| maxTags | 输入标签的最大数量。（如果设置了该参数）
|
||||
| maxChars | 单个标签的最大字符数。（如果设置了该参数）。默认为undefined
|
||||
| trimValue | 如果设置为true，会自动删除标签首尾的空白。默认为false
|
||||
| allowDuplicates | 如果设置为true，可以输入相同的标签。默认为false
|
||||
| focusClass | 当输入框获得焦点时，参数指定的 class 会被应用到容器上。
|
||||
| freeInput | 允许不同该 typeahead 的数据源来创建标签。默认为true
|
||||
| typeahead | typeahead 对象。
|
||||
| cancelConfirmKeysOnEmpty | Boolean value controlling whether form submissions get processed when pressing enter in a field converted to a tagsinput (default: false).
|
||||
| onTagExists | 当视图添加一个已经存在的标签时的回调函数。默认是存在的标签隐藏然后淡入显示。
|
方法
该 Bootstrap tagsinput 自定义标签插件的可用方法有：
add：添加一个标签。
$('input').tagsinput('add', 'some tag');
$('input').tagsinput('add', { id: 1, text: 'some tag' });
你还可以添加第三个参数来控制添加标签的方法：
$('input').tagsinput('add', 'some tag', {preventPost: true});
$('#tags-input').on('beforeItemAdd', function(event) {
var tag = event.item;
// Do some processing hereif (!event.options || !event.options.preventPost) {
$.ajax('/ajax-url', ajaxData, function(response) {
if (response.failure) {
// Remove the tag since there was a failure// "preventPost" here will stop this ajax call from running when the tag is removed$('#tags-input').tagsinput('remove', tag, {preventPost: true});
}});
}});
remove：删除一个标签。
$('input').tagsinput('remove', 'some tag');
$('input').tagsinput('remove', { id: 1, text: 'some tag' });
你还可以添加第三个参数来控制删除标签的方法：
$('input').tagsinput('remove', 'some tag', {preventPost: true});
$('#tags-input').on('beforeItemRemove', function(event) {
var tag = event.item;
// Do some processing hereif (!event.options || !event.options.preventPost) {
$.ajax('/ajax-url', ajaxData, function(response) {
if (response.failure) {
// Re-add the tag since there was a failure// "preventPost" here will stop this ajax call from running when the tag is added$('#tags-input').tagsinput('add', tag, {preventPost: true});
}});
}});
removeAll：删除所有的标签。
$('input').tagsinput('removeAll');
focus：使标签输入框聚焦。
$('input').tagsinput('focus');
input：获取标签输入框对象。
var $elt = $('input').tagsinput('input');
refresh：刷新标签输入框。
$('input').tagsinput('refresh');
destroy：销毁插件。
$('input').tagsinput('destroy');
事件
该 Bootstrap 的标签输入框插件的可用事件有：
itemAddedOnInit：在初始化时，预加载的标签会触发该事件。
$('input').on('itemAddedOnInit', function(event) {
// event.item: contains the item});
beforeItemAdd：在添加一个标签之前会触发该事件。
$('input').on('beforeItemAdd', function(event) {
// event.item: contains the item// event.cancel: set to true to prevent the item getting added});
itemAdded：添加一个标签时会触发该事件。
$('input').on('itemAdded', function(event) {
// event.item: contains the item});
beforeItemRemove：在删除一个标签之前会触发该事件。
$('input').on('beforeItemRemove', function(event) {
// event.item: contains the item// event.cancel: set to true to prevent the item getting removed});
itemRemoved：删除一个标签时会触发该事件。
$('input').on('itemRemoved', function(event) {
// event.item: contains the item});
Github 地址：https://github.com/Nodws/bootstrap4-tagsinput
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
