tagsinput.js自定义标签插件支持bootstrap 3 和 bootstrap 4。
在页面中引入jquery和bootstrap相关文件 ,以及tagsinput.css和tagsinput.js文件。
<
link
href
=
"bootstrap.css"
rel
"stylesheet"
>
"tagsinput.css"
script
src
"jquery.min.js"
></
"bootstrap.min.js"
"typehead.min.js"
"tagsinput.js"
使用<input>作为标签时,只需要添加data-role="tagsinput"属性即可。
<input>
data-role="tagsinput"
input
type
"text"
data-role
"tagsinput"
value
"jQuery,Script,Net"
使用<select>元素作为标签时,需要添加multiple data-role="tagsinput"属性。
<select>
multiple data-role="tagsinput"
select
multiple
option
"jQuery"
>jQuery</
"Angular"
>Angular</
"React"
>React</
"Vue"
>Vue</
</
你也可以动态的为input元添加标签。
$(
'input'
).tagsinput(
'add'
, {
"value"
: 1 ,
:
});
: 2,
"Script"
: 3,
"Net"
该响应式圆形js轮播图插件的可用配置参数如下:
).tagsinput({
tagClass:
'big'
function
(item) {
return
(item.length > 10 ?
'small'
);
}
itemValue:
'id'
item.id;
itemText:
'label'
item.label;
[13, 188]
confirmKeys: [13, 44]
maxTags: 3
undefined
maxChars: 8
true
false
trimValue:
allowDuplicates:
focusClass:
'my-focus-class'
typeahead: {
source: [
'Amsterdam'
,
'Washington'
'Sydney'
'Beijing'
'Cairo'
]
},
freeInput:
source:
(query) {
$.get(
'http://someservice.com'
cancelConfirmKeysOnEmpty:
onTagExists:
(item, $tag) {
$tag.hide().fadeIn();
该Bootstrap tagsinput自定义标签插件的可用方法有:
add
'some tag'
, { id: 1, text:
你还可以添加第三个参数来控制添加标签的方法:
, {preventPost:
'#tags-input'
).on(
'beforeItemAdd'
(event) {
var
tag = event.item;
// Do some processing here
if
(!event.options || !event.options.preventPost) {
$.ajax(
'/ajax-url'
, ajaxData,
(response) {
(response.failure) {
// Remove the tag since there was a failure
// "preventPost" here will stop this ajax call from running when the tag is removed
 
2018-09-07
2018-08-31
2018-08-25
2018-08-21
2018-08-09
2019-05-13
2019-04-25