0

たくさんの jQuery プラグイン (easytabs、datepicker など) を使用する ThemeForest のテーマを購入しました。Railsアプリケーションでそれらを機能させようとしています。それらのどれもしません。それらを機能させるために私がする必要があると私が思うことは次のとおりです。

1) jQuery プラグインを vendor/assets/javascripts フォルダーにコピーします
2) application.js ファイルでそれを必要とします
3) [view].js.coffee ファイルでそれを呼び出します - 私の場合、contacts.js.coffee
4) put必要な HTML を [view].html.erb ファイルに挿入します (javascript などは使用せず、jQuery プラグインが操作するセクションに適切な ID などを挿入するだけです)。

どれも機能しないため、明らかに何かが欠けています。私が作業している唯一の 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/jonnlehman/REAPP

4

1 に答える 1

1

あなたのcoffeescriptであなたは書きます

$('#tab-container').easytabs

しかし、html には id を持つ要素はありませんが、(アンダースコアに注意してください)tab-containerというクラスを使用しているtab_containerため、coffeescript は

$('.tab_container').easytabs

お役に立てれば。

于 2012-08-18T22:17:57.000 に答える