代码之家 › 专栏 › 技术社区 › Johan

Ruby on rails和选项卡

tabs ruby-on-rails

Johan · 技术社区 · 15 年前

我的菜单在这里:

<ul>
  <li class="current"><%= link_to 'Home', root_path %> </li>
  <li><%= link_to 'Browse songs', page_path('browse') %> </li>
  <li><%= link_to 'Add song', new_song_path %> </li>
  <li><%= link_to 'Request song', artists_path %> </li>
  <li><%= link_to 'My ReChord', artists_path %> </li>
  <li><%= link_to 'Help', page_path('help') %> </li>
  <li id="search"><form><input type="search" placeholder="Type here to find a song or an artist"/></form> </li>
  <li class="notab">
    <% if user_signed_in? %>
      <%= link_to 'Sign out', destroy_user_session_path %>
    <% else %>
      <%= link_to 'Sign in', new_user_session_path %> or
      <%= link_to 'sign up', new_user_registration_path %>
    <% end %>
  </li>
</ul>

注意,我有一些只是路由路径的链接(比如new\u song\u path),还有一些是子页面的链接,比如page\u path('help')。我需要它来为这两种类型的链接工作。

4 回复 | 直到 15 年前

Simone Carletti 15 年前

如果你想要更灵活的东西,检查 tabs_on_rails 我创建的插件正好解决了这个常见的模式。

在模板中使用 tabs_tag 帮助创建选项卡。

<% tabs_tag do |tab| %>
  <%= tab.home      'Homepage', root_path %>
  <%= tab.dashboard 'Dashboard', dashboard_path %>
  <%= tab.account   'Account', account_path %>
<% end %>

<ul>
  <li><a href="/">Homepage</a></li>
  <li><a href="/dashboard">Dashboard</a></li>
  <li><a href="/account">Account</a></li>
</ul>

其用法类似于Rails路由文件。使用以下语法创建命名选项卡 tab.name_of_tab

创建选项卡时使用的名称与要将选项卡标记为当前选项卡时在控制器中引用的名称相同。

class DashboardController < ApplicationController
  set_tab :dashboard
end

现在,如果这个动作属于 DashboardController ,模板将自动呈现以下HTML代码。

<ul>
  <li><a href="/">Homepage</a></li>
  <li class="custom"><span>Dashboard</span></li>
  <li><a href="/account">Account</a></li>
</ul>

Daniel O'Hara 15 年前

build 为您准备的菜单:

def menu_builder(page_id)
  tabs = ['home','store','faq']
  content = ""
  tabs.each do |tab|
    content << if page_id == tab
      content_tag('li', content_tag('a', tab, :href => nil ), :class => 'current') + " "
    else
      content_tag('li', content_tag('a', tab, :href => "/#{tab}" )) + " "
    end
  end
  content
end

或者我自己的简短版本:

def menu_builder(page_id)
   ["home", "store", "faq"].map { |tab| 
       %{<li class="#{page_id == tab ? "active" : "inactive"}"><a href="#{tab}">#{tab.capitalize}</a></li>}  
   }.join("\n")
end

page_id

class Foo < ApplicationController

    def faq
        @page_id = 'faq'
        ...
    end
end

然后在模板中使用它:

<ul>
    <%= menu_builder(@page_id) %>
    <li class="search">...</li>
</ul>

RamC Peter Neubauer 6 年前

看看这个插件:

http://github.com/paolodona/rails-widgets

它有很多很酷的组件,包括导航。

文档: https://github.com/paolodona/rails-widgets/wiki

techiferous 12 年前

我创造了 tabulous 解决这个问题。有一个单独的选项卡配置文件,您可以在其中描述希望选项卡的行为方式。例如:

Tabulous.setup do

  tabs do
    pictures_tab do
      text          { 'Pictures' }
      link_path     { pictures_path }
      visible_when  { true }
      enabled_when  { true }
      active_when   { in_action('any').of_controller('pictures') }
    end

    music_tab do
      text          { 'Music' }
      link_path     { songs_path }
      visible_when  { true }
      enabled_when  { current_user.has_music? }
      active_when   { in_action('any').of_controller('songs') }
    end

    profile_tab do
      text          { 'My Profile' }
      link_path     { account_path(current_user) }
      visible_when  { true }
      enabled_when  { true }
      active_when   { in_actions('show', 'edit', 'update').of_controller('accounts') }
    end
  end

end

阅读 the tabulous documentation 了解更多。