Question

我正在尝试在我的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放在public-＆gt; javascripts和public-＆gt; stylesheets下的css中 - 就像它只显示文本一样，它们都不是可链接的，它会显示所有表单信息。

Answer 1

不完全是一个解决方案，但为什么不使用更受欢迎且功能丰富的库？

JqueryUI提供了一种实现标签的简单方法。加载lib后，您只需要

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

然后添加一些链接，重新调整所有div和bam！即时标签。另外，你拥有所有的Jquery Lib，这非常棒。

Answer 2

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

使用Javascript的Rails选项卡式视图

2 个答案: