Rails Tabbed View с использованием Javascript - PullRequest
Новая
       4

Rails Tabbed View с использованием Javascript

0 голосов
/ 10 ноября 2011

Я пытаюсь использовать табификатор в моем приложении 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, если в public-> javascripts, а css в public-> stylesheets - как будто он просто показывает текст, ни один из них не является связываемым и отображает всю информацию о форме.

Ответы [ 2 ]

1 голос
/ 10 ноября 2011

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

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

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

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

0 голосов
/ 12 ноября 2011

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

...