这是一款非常实用的基于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());