jQuery标签插件Tag-it

所属分类： JQ特效输入自动完成

查看演示立即下载

插件描述： Tag-it它是一个 jQuery UI 插件, 用于处理多标签字段以及标记建议/自动完成。

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

Tag-it: a jQuery UI 插件

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

使用方法

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

<script src="/"></script>
<script src="/"></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主题作为例子：

1 2	`<link` `rel="stylesheet"` `type="text/css"` `href="/">` `<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"]
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery鼠标移入移出判断方向
下一个特效：基于layui日历记事本（原创）