jQuery标签插件Tag-it

 查看演示  website  立即下载

发布时间：2018-6-1 0:30

Tag-it: a jQuery UI 插件

Tag-it它是一个简单的和可配置的标签编辑小部件与自动完成支持。

使用方法

首先, 加载 jquery (v1.4 或更高)、jquery UI (v1.8 或更高) 和插件:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<!-- The real deal -->
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>

如果您使用自定义的jQuery UI构建，它必须包含Core，Widget，Position和Autocomplete组件。 具有“分词”和“高亮”效果组件的效果核心是可选的，但在可用的情况下使用。

该插件需要jQuery UI主题或Tag-it主题以及其自己包含的基本CSS文件（jquery.tagit.css）。 在这里我们使用Flick主题作为例子：

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">

现在，让我们将其附加到现有的<ul>框中：

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit();
    });
</script>

<ul id="myTags">
    <!-- Existing list items will be pre-added to the tags -->
    <li>Tag1</li>
    <li>Tag2</li>
</ul>

这会将列表变成一个标签 - 还有其他几种可能的配置和方法来实例化小部件，包括使用单个逗号分隔的输入字段而不是每个标记一个的部分，因此请参阅下面的“选项”文档以及示例页面（及其源代码） 。

主题化

Tag-it它与任何jQuery UI小部件一样容易主题化，您使用Themeroller制作的主题或jQuery UI预制主题之一。 旧的类似ZenDesk的主题作为可选的CSS文件（tagit.ui-zendesk.css）包含在内。

选项

Tag-it - 它接受几个选项来定制其行为：

fieldName（String）

每个标签的隐藏输入字段都会有这个名称。 如果您使用的是PHP，您可能需要为此选项的值使用itemName [fieldName] []。

$("#myTags").tagit({
    fieldName: "skills"
});

availableTags (Array)

用作自动完成功能的源, 除非自动完成. 源被重写。

$("#myTags").tagit({
    availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
});

PREVIOUS:
NEXT:
基于layui日历记事本（原创）
jQuery鼠标移入移出判断方向