0

我在 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 提到，“幸运的是，这有一个宝石，否则我们必须检查并修复损坏的图像链接......”

我是 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 帐户，如果你真的想看看我所做的一切，尽其荣耀 https://github.com/jonlehman/REAPP

4

1 回答 1

1

在你的咖啡脚本中你写

$('#tab-container').easytabs

然而在您的 html 中没有带有 id 的元素tab-container，但您确实使用了一个名为tab_container（注意下划线）的类，所以您的咖啡脚本应该是

$('.tab_container').easytabs

希望这可以帮助。

于 2012-08-18T22:17:57.000 回答