jQuery标签编辑插件Tagit使用指南

今天我要向大家推荐一款非常实用的jQuery插件——tagit。该插件能够极大地提高网站的交互性，提升用户体验。如果你正在寻找一种方式来优化你的网站，那么tagit绝对是一个值得考虑的选择。

一、Tagit插件功能介绍

Tagit插件可以将关键词标签化，形成一个整体，便于删除和浏览。相比普通的input text，tagit提供了输入提示功能，这对于用户来说是非常友好的。官方提供的示例已经充分展示了这一点。

二、Tagit官方地址

Tagit的官方地址提供了详细的使用说明和丰富的用例。这些用例的颜色搭配可以选择，虽然选择范围有限，但已经足够满足大部分需求。Tagit插件基于jqueryui构建，因此兼容jqueryui提供的样式。如果你想对tagit进行样式修改，可以参考官方文档中的指导。网上也有一些免费的和收费的样式可供选择。

三、Tagit的使用方法

虽然Tagit的功能强大，但其使用方法非常简单。你需要引用jQuery库和jqueryui库。然后，你可以通过简单地引入Tagit插件的脚本和样式表来使用它。在网页中，你只需要按照官方文档的指导，为需要标签化的输入框添加相应的类名或ID，即可实现标签化的功能。

Tagit还支持各种事件操作，如编辑前、编辑后、删除前、删除后等，这些事件可以方便你进行自定义操作。

引入文件

为了构建我们的用户界面，我们需要引入一些必要的JavaScript和CSS文件。以下是所需的文件引用：

```html

```

自定义样式

接下来，我们定义了一些样式来定制我们的界面。这些样式包括容器宽度、按钮的填充、标签的边框、背景颜色、文字颜色等。具体样式如下：

```css

container {

width: px;

}

input[type=submit] {

padding: 8px;

}

singleFieldTags {

border: 1px solid b1c9dc;

background: e7e3ca;

}

singleFieldTags input {

background: e7e3ca;

color: blue;

}

singleFieldTags li {

background: e7e3ca;

border: 1px solid 930;

color: red;

}

singleFieldTags .tagit-new {

border: none;

}

```

JavaScript代码

我们的JavaScript代码主要负责初始化标签控件并处理用户交互。以下是主要功能的简要说明：

```javascript

$(function(){

var sampleTags = ['c++', 'java', 'php', ...]; // 示例标签列表

$('myTags').tagit({ / 初始化标签控件 / });

$('singleFieldTags').tagit({ / 配置标签控件 / });

$('submit1').click(function(){ / 点击获取输入信息时的操作 / });

$('submit2').click(function(){ / 点击获取另一个输入信息时的操作 / });

});

```

HTML结构

我们的HTML结构包括两个测试用例，分别展示了不同的标签使用场景。用户可以通过点击提交按钮获取输入信息。以下是HTML结构的主要部分：

```html