这些演示了Tag-it的各种功能。查看源代码以了解每种方法的工作原理。

最小

Vanilla示例 - 所需的绝对最小代码量，无需配置。没有自动完成功能。请参阅其他示例。

    单一输入字段

    使用单个输入表单字段来保存所有标记值的示例，而不是每个标记一个（请参阅settings.singleField）。如果你有一个带有一个逗号分隔标签输入字段的表单，你想简单地“升级”到这个奇特的jQuery UI小部件，这种方法特别有用。对于没有JS的浏览器，此配置也会很好地降级 - 默认行为是每个标记都有一个输入，不会降级，也不会受到逗号分隔的输入的影响。

    通常情况下，这个输入字段将被隐藏 - 我们在这里让它可见，这样你就可以看到它是如何被widget控制的：

      单输入字段（2）

      如果您在INPUT元素上实例化标签，它将默认为singleField，并将该INPUT元素作为singleFieldNode。这是拥有一个优雅退化标签小部件的最简单方法。

      没有行情的空间

      您已经可以在默认情况下在其中使用空格的多字标记，但这些标记必须用引号括起来。此选项可让您使用空格，而无需用户引用输入。

      通常有5种方法可以在输入文本后插入标签：空格，逗号，输入，选择自动填充选项或者使小部件散焦。通过将“allowSpaces”选项设置为true，空间不再插入标签，它只是为当前标签输入添加一个空格。

        在标记中预加载数据

        使用HTML中的UL预先填充一些标签。

        • Tag1
        • Tag2

        只读

        只读标签示例。

        • Tag1
        • Tag2

        活动

        标签事件的例子。尝试添加或移除标签，添加重复标签或点击标签标签。

        • Click my label
        • Remove me

        方法

        演示可用的小部件方法。点击小部件下方的链接来尝试它们。

          Create tag

          Remove tag by name

          Clear tags

          删除确认

          当启用removeConfirmation时，用户必须按退格键两次才能删除最后一个标记。

          • backspace me
          • me too

          适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

          来源：站长素材