jQuery标签插件Tag-it

所属分类:UI,输入-标签,自动完成

 1135  17  查看评论 (1)
 jQuery标签插件Tag-it ie兼容6

发布时间: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"]
});
相关插件-标签,自动完成

select美化小插件

select美化插件
  标签
 22760  77

jQuery实用的文章自定义标签插件(原创)

自己项目中用到的,也许对萌新们有点用处,特此贴上
  标签
 1789  21

css3-button-with-tooltip

css3-button-with-tooltip很清新
  标签
 12179  14
  标签
 42070  115

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    沐流光 0
    2018/6/12 16:11:23
    没有详细的api吗 回复
取消回复