Блог

Я пытаюсь использовать tabifier в своем приложении rails, поэтому у меня есть:

 <%= 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-> таблицы стилей — как будто он просто показывает текст, ни один из них не может быть связан, и он отображает всю информацию о форме.

не совсем решение, но почему бы не использовать более популярную и многофункциональную библиотеку?

jQueryUI предлагает приятный и простой способ реализации вкладок. Как только библиотека будет загружена, все, что вам нужно будет сделать, это

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

затем добавьте несколько ссылок, повторно классифицируйте все свои divs и бац! мгновенные вкладки.
Кроме того, у вас есть вся библиотека Jquery, что само по себе потрясающе.

Оказывается, я не поместил css и js в папку assets, которая вызывала проблему.