这些演示了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