1

私はこれに何時間も取り組んできましたが、うまくいきません。Scriptaculous の Effects ライブラリを使用して ToggleJS を機能させようとしています。具体的には、例: http://wiseheartdesign.com/page_attachments/0000/0075/demo.html .

new.html と呼ばれる純粋な html ファイルを使用して、美しく動作するようにしました。それから new.html.erb に変換して、いくつかのアニメーションを自分の Rails プロジェクトに組み込むことができるようにしましたが、動作しなくなりました!

HTML タグと Ruby JavaScript タグの両方を試しましたが、どちらも機能しません。次に例を示します。

<%= javascript_include_tag "application", "prototype", "effects", "lowpro", "toggle" %>

ページの本文はブラウザに表示されていますが、アニメーションはありません。私は自分の JavaScript ファイルがデモと同じであることを確認しました (さらに、html ファイルはとにかく動作しています)。私の .erb ファイルのどこに問題があるか知っていますか?

私が使用しているhtmlのサンプル：

<h3>Toggle.LinkBehavior</h3> 
    <div class="expand_me" id="one">Expanded!</div> 
    <p> 
      <a class="toggle" href="#one" rel="toggle[one]">Expand</a> 
    </p> 
    <div class="expand_me" id="two">Expanded! 1</div> 
    <div class="expand_me" id="three">Expanded! 2</div> 
    <p> 
      <a class="toggle" href="#two" rel="toggle[two,three]">Expand even more</a> 
    </p> 

#Application.js
Event.addBehavior({
   'a.toggle': Toggle.LinkBehavior(),
   'a.inverted_toggle': Toggle.LinkBehavior({invert: true}),
   'a.open': Toggle.LinkBehavior({
  effect: 'blind',
  onLoad: function(link) {
    this.toggle();
  },
  beforeToggle: function(link) {
    link.innerHTML = (link.innerHTML == "Open") ? "Opening..." : "Closing...";
  },
  afterToggle: function(link) {
    link.innerHTML = (link.innerHTML == "Opening...") ? "Close" : "Open";
  }
   }),
   'form input.checkbox.toggle': Toggle.CheckboxBehavior(),
   'form input.checkbox.inverted_toggle': Toggle.CheckboxBehavior({invert: true}),
   'form .radio_group.toggle': Toggle.RadioGroupBehavior({effect: 'blind'}),
   'form select.toggle': Toggle.SelectBehavior()
 });

エイマンタス、私はまったくの初心者です。HTMLドキュメントに次を追加しましたが、機能しませんでした：

<script type="text/javascript">
window.onload = Event.addBehavior
</script>

これがあなたの言いたいことですか、それとも .html.erb ファイルにどのコードを書く必要があるか教えてもらえますか?

4

1 に答える 1

2

生成された javascript ファイルの html を貼り付けることはできますか?

toggle.jsファイルより後にロードされると思いますapplication.js。したがって、トグル効果のためapplication.jsのすべてのフック コード ( window.onload...) がある場合、ライブラリ自体がまだロードされていないため、失敗します。

アップデート：

Event.addBehaviorウィンドウの読み込みを行う方法は次のとおりです。

<script type="text/javascripts">
  window.onload = function() {
    Event.addBehavior({
      // all params and code.
    });
  }
</script>

プロトタイプ スタイルの関数の実行については、プロトタイプのドキュメントを確認する必要がありwindow.onloadます。

于 2010-05-30T06:11:16.410 に答える