将 CSS 链接到 Taggle.js

Question

我对 CSS 和 javascript 还很陌生。我一直在尝试实施 Taggle.js (http://sean.is/poppin/tags) 中提供的标记系统。

使用这个脚本：

  <html>
  <body>
    Hello!! <br>
    <form id="form1" action="http://127.0.0.1:5000/post">
      <fieldset>
        Tags:
        <div id ="freeTags" ></div>
        <p id='tag'></p><br><br>
     </fieldset>
    </form>

    <script src="./node_modules/taggle/assets/js/taggle.js"></script>
    <script>
    var text = document.getElementById('tag');
    new Taggle('freeTags', {
      onTagAdd: function(event, tag) {
        text.innerHTML = "You just added " + tag;
      },
      onTagRemove: function(event, tag) {
        text.innerHTML = "You just removed "+ tag;
      },
      duplicateTagClass : "bounce"

    });
    </script>
  </body>
</html>

我无法获得与网站（花哨的文本框）相同的效果，而我得到的是：

虽然我使用 bower 安装了 bounce.js，但它也没有实现 'bounce' 功能。

我想一定是CSS链接到HTML的问题。任何人都可以帮助解决这个问题吗？

Answer 1

taggle 的文档说弹跳效果由 taggle.css 文件处理...您上面的代码示例不包含该文件。建议此文件还处理您所说缺少的元素的样式。所以只需link这个文件在你的文档中并重新测试。

在 link 文件夹 assets/css/ (find here) 上方的存储库中找到 CSS 文件，然后保存 taggle.css 或 taggle.min.css（用于生产）到您的服务器，并在 <html> 开始标记后立即将以下内容添加到您的页面...

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
    </head>
    <body>
        <!-- your content... -->
    </body>
</html>

将 CSS 链接到 Taggle.js

Linking CSS to Taggle.js

html

javascript

css

jquery

tagging