基于Bootstrap简单实用的tags标签插件

当前位置:主页 > jQuery库 > 表单 > 基于Bootstrap简单实用的tags标签插件
基于Bootstrap简单实用的tags标签插件
分享:

    插件介绍

    这是一款非常实用的基于Bootstrap的tags标签jQuery插件。该tags标签插件可以通过在输入框中输入内容来生成标签,也可以修改tags标签的内容。它可以完美的和Bootstrap 3结合使用。

    浏览器兼容性

    浏览器兼容性
    时间:2015-06-25
    阅读:
简要教程

这是一款非常实用的基于Bootstrap的tags标签jQuery插件。该tags标签插件可以通过在输入框中输入内容来生成标签,也可以修改tags标签的内容。它可以完美的和Bootstrap 3结合使用。它的特点有:

  • 可以在输入框中键入新的内容,通过按回车键来生成新的标签。
  • 可以通过点击标签来对该标签进行编辑。
  • 和Bootstrap完美结合。

使用方法

使用该tags插件要引入jQuery和Bootstrap依赖,jQuery版本要大于1.9.1(Bootstrap要求jQuery版本大于1.9.1)。还要引入jquery.tags.min.js文件。

<link rel="stylesheet" href="dist/bootstrap.min.css">
<script src="dist/jquery-1.9.1.min.js"></script>
<script src="dist/jquery.tags.min.js"></script>                
              
初始化插件

你可以直接在<input>元素上添加data-toggle="tags",这样页面初始化之后会直接初始化该tags插件。

<input type="text" data-toggle="tags" />              
              

或者你也可以通过调用$('#id').tags()方法来初始化该tags插件。

$('#id').tags('tag1', 'tag2');                
              

要想获取用户输入的值,可以使用下面的方法:

$('#value').text($('#id').val());