tag-it.js输入框创建标签代码 -JS/jQuery代码 -演示与下载 -时代Java

这些演示了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
          下载代码说明
          X关闭

          jQuery+tag-it.js实现的输入框创建标签特效源码

          jQuery+tag-it.js实现的输入框创建标签特效源码是一段基于jQuery实现的输入框输入文字空格键创建标签插件,当然tag-it.js插件的功能并不止如此,本次只是演示了tag-it.js插件其中一个功能而已,欢迎有兴趣的朋友前来下载使用。如果大家非常好奇该段代码所带来的动画效果的话,可以点击【演示地址】进行预览哦,兼容IE8及以上浏览器,小编建议使用【火狐】浏览器预览,如图所示: