1

我是 RoR 和 JS 的新手，可以使用一些帮助来理解其中一些部分是如何组合在一起的。我已经阅读了许多资源，并且我认为我知道该怎么做，但是仍然有一些东西在逃避我。

我想创建一个用于输入标签的界面，就像 Stack Overflow 上的界面一样。我发现以下插件具有我最终想要摆弄的所有功能： //xoxco.com/projects/code/tagsinput/

所以这就是我所做的：

1）我下载了压缩包。
2）我将jquery.tagsinput.js和jquery.tagsinput.min.js放入vendor/assets/javascripts。
3）我将jquery.tagsinput.css放入vendor/assets/stylesheets。
4) 在我的views/nuggets/index.html.erb中，我添加了<input name="tags" id="tags" value="foo,bar,baz" />
5) 在我的app/assets/javascripts/nuggets.js.coffee中，我添加了$('#tags').tagsInput();

当我注意到输入没有按预期工作时，我检查了页面的源代码并注意到以下行不存在：
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

结果，我认为我应该添加到 //= require jquery.tagsinputapp /assets/javascripts/application.js和app/assets/stylesheets/application.css。*= require jquery.tagsinput

我敢肯定，回想起来，这一切似乎都很微不足道，但我现在很迷茫。

谢谢你的帮助，

禾本科

编辑，为@user1965817 添加信息：app/assets/javascripts/application.js
的内容： 

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery.tagsinput

app/assets/stylesheets/application.css的内容：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

*= require jquery.tagsinput

body 
{
    background-color:#C5C5F0;
    font-family: Geneva, Tahoma, Verdana, sans-serif;
}

.header 
{
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    font-size:30px;
    text-align:center;

    top: 0px;
    margin:0px;  
    padding: 0px 2px 2px 3px;   
    margin-bottom: 70px; 
    border-width: 2px;
    border-bottom: 1px gray solid;
    width: 70%;
}
4

1 回答 1

1

你的 CSS 不正确

您需要将 require 语句保留在文件顶部（不分隔）：

 *= require_self
 *= require_tree .
 *= require jquery.tagsinput
 */

你有没有初始化标签JS？

为了初始化脚本，您必须能够“调用”插件，如下所示：

$('#tags').tagsInput({
    //parameters here
});
于 2013-10-24T09:05:51.620 回答