Rails4和tabulous?

时间:2014-04-11 04:28:25

标签: ruby-on-rails ruby zurb-foundation

这是使用zurb foundation和tabulous的视图hello.html.erb:

 <html>
 <body>
 <div class="contain-to-grid">
 <nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Hello World!</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
 </li>
      </ul>

 <ul class="center">
 <li style="padding-top:55px;">
  <%= form_tag("/salutation/hello", method: "post") do %>
    <div class="large-6 columns" style="padding-left:250px;border:0px;
  margin-right:0px;padding-right:0px;">
        <%= text_field_tag(:find_stuff) %>
     </div>
     <div>
          <%= submit_tag "Search", class: "large-1 small-3 columns",
  style:"color:white;border:none;background-color:red;height:28px;margin:0px;"%>
     </div>

  <% end %>
 <a href="#" style="padding-left:80px;">Login|Register</a>


  </li>
 </ul>    

 </nav>
 <%= tabs %>
 <%= subtabs %>

</div>
 <div class="row">
  <div class="six columns">
   <div class="panel" style="min-height:800px">
 <p><%= @test %></p>
 <p><%= @test %></p>
  </div>
  </div>
 </div>



 </body>
 </html>

这是控制器salutation.rb:

class SalutationController < ApplicationController
  def new
   @test = ''
  end

  def hello
   @message = 'Hello, World!'
   @test = params[:find_stuff]  
  end
end

这是一个非常简单的代码,用于在搜索框中读取文本并写入视图。我有一个 文件tabulous.rb,它将菜单选项卡添加到屏幕。 tabulous.rb的代码是:

tabulous.setup do

 tabs do

  news_tab do
   text          { 'News' }
   link_path     { news_index_path }
   visible_when  { true }
   enabled_when  { true }
   active_when   { in_action('any').of_controller('news') }
  end

  homes_tab do
   text          { 'Homes' }
   link_path     { homes_path }
   visible_when  { true }
   enabled_when  { true }
   active_when   { in_action('any').of_controller('homes') }
 end

end

customize do


end


 use_css_scaffolding do
  background_color '#ccc'
  text_color '#444'
  active_tab_color '#fff'
  hover_tab_color '#ddd'
  inactive_tab_color '#aaa'
  inactive_text_color '#888'
 end

 end

当我在没有zurb基础样式的情况下尝试这些选项卡时,表单显示菜单选项卡 很好,但是当我在视图中嵌入此表单时没有显示,表单只显示带有搜索框的主顶栏。为什么会发生这种情况我无法弄清楚 - 是 这是因为zurb粉底的造型,打破它,或任何其他原因?

1 个答案:

答案 0 :(得分:0)

为什么要使用tabulous.rb?基金会已经支持开箱即用的标签。您可以参考markup required to create them的文档。这样会更容易。

顺便说一句,我建议不要在标记中添加内联CSS。标记(用于内容)和CSS(用于样式)之间应该存在关注点。顺便说一句,这与tabrat可能不是一个很好的选择的原因相同。创建结构和风格并不是Ruby的工作。