Bootstrap tagsinput自定义标签插件

bootstrap tags 标签 2018-05-07

控件介绍
tagsinput是一款基于Bootstrap的自定义标签插件。该自定义标签插件提供api接口,可以将input和select元素转换为标签。并能和typehead.js插件结合,提供查询提示信息。
浏览器兼容

支持IE9+

演示下载 846
使用方法

tagsinput.js自定义标签插件支持bootstrap 3 和 bootstrap 4。

使用方法

在页面中引入jquery和bootstrap相关文件 ,以及tagsinput.css和tagsinput.js文件。

1
2
3
4
5
6
<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"属性即可。

1
<input type="text" data-role="tagsinput" value="jQuery,Script,Net">

使用<select>元素作为标签时,需要添加multiple data-role="tagsinput"属性。

1
2
3
4
5
6
<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元添加标签。

1
2
3
$('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的函数。
1
2
3
$('input').tagsinput({
  tagClass: 'big'
});
1
2
3
4
5
$('input').tagsinput({
  tagClass: function(item) {
    return (item.length > 10 ? 'big' : 'small');
  }
});
itemValue 当使用对象作为标签时,itemValue属性用于指明标签值的属性名称。
1
2
3
$('input').tagsinput({
    itemValue: 'id'
});
1
2
3
4
5
$('input').tagsinput({
  itemValue: function(item) {
    return item.id;
  }
});
itemText 当使用对象作为标签时,itemText属性用于指明标签名称的属性名称。
1
2
3
$('input').tagsinput({
  itemText: 'label'
});
1
2
3
4
5
$('input').tagsinput({
  itemText: function(item) {
    return item.label;
  }
});
confirmKeys 用于在输入框输入标签时通过什么按键来输出标签。默认为[13, 188],代表回车和comma键。
1
2
3
$('input').tagsinput({
  confirmKeys: [13, 44]
});
maxTags 输入标签的最大数量。(如果设置了该参数)
1
2
3
$('input').tagsinput({
  maxTags: 3
});
maxChars 单个标签的最大字符数。(如果设置了该参数)。默认为undefined
1
2
3
$('input').tagsinput({
   maxChars: 8
});
trimValue 如果设置为true,会自动删除标签首尾的空白。默认为false
1
2
3
$('input').tagsinput({
   trimValue: true
});
allowDuplicates 如果设置为true,可以输入相同的标签。默认为false
1
2
3
$('input').tagsinput({
  allowDuplicates: true
});
focusClass 当输入框获得焦点时,参数指定的class会被应用到容器上。
1
2
3
$('input').tagsinput({
  focusClass: 'my-focus-class'
});
freeInput 允许不同该typeahead的数据源来创建标签。默认为true
1
2
3
4
5
6
$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});
typeahead typeahead对象。
1
2
3
4
5
$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  }
});
1
2
3
4
5
6
7
$('input').tagsinput({
  typeahead: {
    source: function(query) {
      return $.get('http://someservice.com');
    }
  }
});
cancelConfirmKeysOnEmpty Boolean value controlling whether form submissions get processed when pressing enter in a field converted to a tagsinput (default: false).
1
2
3
$('input').tagsinput({
  cancelConfirmKeysOnEmpty: true
});
onTagExists 当视图添加一个已经存在的标签时的回调函数。默认是存在的标签隐藏然后淡入显示。
1
2
3
4
5
$('input').tagsinput({
  onTagExists: function(item, $tag) {
    $tag.hide().fadeIn();
  }
});

方法

该Bootstrap tagsinput自定义标签插件的可用方法有:

  • add:添加一个标签。
    1
    $('input').tagsinput('add', 'some tag');
    1
    $('input').tagsinput('add', { id: 1, text: 'some tag' });

    你还可以添加第三个参数来控制添加标签的方法:

    1
    $('input').tagsinput('add', 'some tag', {preventPost: true});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $('#tags-input').on('beforeItemAdd', function(event) {
       var tag = event.item;
       // Do some processing here
     
       if (!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
            

本文转载请注明出处:http://www.zhuiye.com/detail_622.html
评论区
  • 还没有评论,快来抢沙发吧!