Twitter Bootstrap Pillen mit Schienen 3.2.2

Question

Ich folgte der grundlegenden Railscast für die Verwendung von Twitter Bootstrap in Rails-Anwendung. Alles war großartig, bis ich nach Heroku schieben musste, dann hatte ich ein paar Probleme mit pg gem, und ich musste Assets rake: precompile, um es in Ordnung zu bringen. Endlich habe ich gelöst.

Nun, ich versuche Pillen in meiner Anwendung zu verwenden, habe ich Kopieren/Einfügen von Dokumentation und verändert die URL in href :)

<div class="container"> 
    <div class="row"> 

    <div class="span3"> 
     <p> Lorem Ipsum</p> 
    </div> 

    <div class="span9">  
     <ul class="nav nav-pills"> 
     <li class="active"><a href="/">Home</a></li> 
     <li><a href="/products">Products</a></li> 
     <li><a href="/categories">Categories</a></li> 
     </ul> 
    </div> 

    </div> 
</div> 

Als ich einen der Links schieben, ich bin an die richtige URL umgeleitet, aber die ausgewählte Option ändert sich nicht in class = "active". Ich weiß nicht, warum ... Ich dachte, es wäre das Javascript, aber Hover-Eigenschaft funktioniert ok ... Ich meine, wenn die Maus über eine Option (anders als aktiv) ist, ändert sich der Stil in Ordnung.

Ich habe versucht, Harke Vermögen: sauber, aber keine Änderung

Dank

Answer 1

Sie müssen tatsächlich handhaben diese selbst gemacht!

Ihre Liste sollte so aussehen wie

<li class="<%= 'active' if params[:controller] == 'yourdefaultcontroller' %>"><a href="/">Home</a></li> 
    <li class="<%= 'active' if params[:controller] == 'products' %>"><a href="/products">Products</a></li> 
    <li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="/categories">Categories</a></li> 

Sie müssen in jeder Anforderung, die Registerkarte angeben, ist die aktive. Sie können dies tun, indem Sie sich auf den Namen des Controllers (und gegebenenfalls auf die Aktion) verlassen, der im params-Hash übergeben wird.

Answer 2

Sie können so etwas wie folgt verwenden:

<li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li> 
<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li> 
<li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li> 

Answer 3

benutzte ich einen Helfer diese im Stil von Rails' Formular-Helfer zu implementieren.

In einem Helfer (zB app/helpers/ApplicationHelper.rb):

def nav_bar 
    content_tag(:ul, class: "nav navbar-nav") do 
    yield 
    end 
end 

def nav_link(text, path) 
    options = current_page?(path) ? { class: "active" } : {} 
    content_tag(:li, options) do 
    link_to text, path 
    end 
end 

Dann in einer Ansicht (zB app/views/layouts/application.html.erb):

<%= nav_bar do %> 
    <%= nav_link 'Home', root_path %> 
    <%= nav_link 'Posts', posts_path %> 
    <%= nav_link 'Users', users_path %> 
<% end %> 

Dieses Beispiel erzeugt (wenn man auf der Seite 'Benutzer'):

<ul class="nav navbar-nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/posts">Posts</a></li> 
    <li class="active"><a href="/users">Users</a></li> 
</ul>