使用 Javascript 的 Rails 选项卡式视图答案

【问题标题】：Rails Tabbed View using Javascript使用 Javascript 的 Rails 选项卡式视图
【发布时间】：2011-11-09 20:38:46
【问题描述】：

我正在尝试在我的 rails 应用程序中使用 tabifier，所以我有：

<%= stylesheet_link_tag "example", "example-print" %>
<%= javascript_include_tag 'tabber.js' %>

<script>

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('tabber{display:none;}');
</script>

<div class="tabber">

     <div class="tabbertab">
    <h2>Tab 1</h2>
    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
      <%= devise_error_messages! %>
      <div><%= f.label :peeruser %><br />
      <%= f.select :peeruser, [['Not yet','not yet'],['Beginner','beginner'],['Intermediate','intermediate'],['Expert','expert']] %></div>

      <div><%= f.label :discipline %><br />
      <%= f.text_field :discipline %></div>

      <div><%= f.label :course %><br />
      <%= f.text_field :course %></div>

      <div><%= f.label :concept %><br />
      <%= f.select :concept, [['Yes','yes'],['No','no']] %></div>

      <div><%= f.submit "Continue" %></div>
    <% end %>
     </div>


     <div class="tabbertab">
    <h2>Tab 2</h2>
    <p>Tab 2 content.</p>
     </div>


     <div class="tabbertab">
    <h2>Tab 3</h2>
    <p>Tab 3 content.</p>
     </div>

</div>

<%= link_to "Back", :back %>

而且我不知道为什么它没有像示例那样正确加载：

http://www.barelyfitz.com/projects/tabber/

我把 javascript if 放在 public->javascripts 下，把 css 放在 public->stylesheets 下——就像它只显示文本，没有一个是可链接的，它显示所有表单信息。

【问题讨论】：

标签： javascript ruby-on-rails tabs erb

【解决方案1】：

不完全是一个解决方案，但为什么不使用更流行和功能丰富的库呢？

JqueryUI 提供了一种很好且简单的方式来实现选项卡。加载库后，您所要做的就是

<script>
$(function() {
    $( ".tabber" ).tabs();
});
</script>

然后添加一些链接，重新分类所有 div 和 bam ！即时标签。另外，您拥有所有的 Jquery Lib，这真是太棒了。

【讨论】：

【解决方案2】：

原来我没有将 css 和 js 放在导致问题的 assets 文件夹中。

【讨论】：