1

我已经在这几个小时，但它只是不工作。我正在尝试使用 Scriptaculous 的效果库让 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()
 });

Eimantas，我在这方面完全是新手。我在我的 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 回答