如何在Rails中安装和使用jQuery插件？

我在ThemeForest上买了一个主题，它使用了大量jQuery插件（easytabs、datepicker等）。我正试图让它们在我的Rails应用程序中工作。他们都没有。以下是我认为我需要做的事情来让他们工作：

1） 将jQuery插件复制到vendor/assets/javascripts文件夹
2） 在application.js文件中需要它
3） 在[view].js.coffee文件中调用它-在我的例子中是contacts.js.coffee
4） 将所需的HTML放入[view].HTML.erb文件（无javascript等，只需将适当的ID等插入jQuery插件将要操作的部分）

很明显，我遗漏了一些东西，因为它们都不起作用。我唯一使用的jQuery插件是DataTables插件，但我遵循了RailsCast，并使用它的gem安装了它。RailsCast提到，“幸运的是，有一个gem用于此，否则我们必须通过修复损坏的图像链接…”

我是Rails/web开发的新手，我已经在这堵墙上敲了几天了，所以我不想盲目地开始更新jQuery文件中的链接

我应该如何对此进行故障排除

下面是我（大部分）剪切和粘贴的代码：

从Application.js：

 WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require plugins/ui/jquery.easytabs.min
//= require_tree .

从properties.js.coffee：

# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
jQuery ->
  $('#properties').dataTable
    sPaginationType: "full_numbers"
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#properties').data('source')
  $('#tab-container').easytabs
    animationSpeed: 300,
    collapsible: false,
    tabActiveClass: "clicked"

从index.html.erb的属性：

<!-- Tabs -->
        <div class="fluid">
            <div class="widget grid6">       
                <ul class="tabs">
                    <li><a href="#tabb1">Tab active</a></li>
                    <li><a href="#tabb2">Tab inactive</a></li>
                </ul>

                <div class="tab_container">
                    <div id="tabb1" class="tab_content">
                        Tab is active and has left tabs             
                    </div>
                    <div id="tabb2" class="tab_content"> This tab is active now</div>
                </div>  
                <div class="clear"></div>        
            </div>

            <div class="widget grid6 rightTabs">       
                <ul class="tabs">
                    <li><a href="#tabb3">Tab active</a></li>
                    <li><a href="#tabb4">Tab inactive</a></li>
                </ul>
                <div class="tab_container">
                    <div id="tabb3" class="tab_content">
                        Tab is active and has right tabs               
                    </div>
                    <div id="tabb4" class="tab_content"> This tab is active now</div>
                </div>  
                <div class="clear"></div>        
            </div>
        </div>

选项卡处于活动状态，并具有左选项卡
此选项卡现在处于活动状态




选项卡处于活动状态，并且具有右侧选项卡
此选项卡现在处于活动状态

这是我的github帐户，如果你真的想看看我所做的一切，在它的荣耀

---

在你的咖啡脚本中

$('#tab-container').easytabs

但是在html中没有id为

tab container

的元素，但是您确实使用了一个名为

tab\u container

的类（注意下划线），因此您的咖啡脚本应该是

$('.tab_container').easytabs

---

希望这能有所帮助。

嘿，约翰，你正在安装的插件是什么？你的说明中似乎只缺少了插件与应用程序的交互方式。如果我知道，我可以帮助你实现它。感谢他们的帮助。我真的很感激。让我们试试EasyTabs，因为这是我正在尝试使用的插件之一。我会的将相关代码添加到我的原始问题中嗯，你只需要

require\u tree

语句。我想你加载了两次。哈哈……我还以为“tree”可能是另一个js文件。那么，有了“require\u tree”，你为什么还需要application.js文件中的任何其他内容呢？（例如，railscast让我放置require dataTables/jquery.dataTables）require_树只需要指定文件夹中的文件（

此处），因此它不需要位于

vendor/assets/javascript

中的文件，也不需要位于

app/assets/javascript/lala

中的文件。您确实需要包含这些文件。更改为.tab_container…仍然不起作用。此外，仍然存在“无方法”easytabs“”错误