ruby on rails - modal - ¿Cómo obtener la navegación Twitter-Bootstrap para mostrar el enlace activo?

instalar bootstrap en ruby on rails

Question

No entiendo cómo Twitter Bootstrap hace enlaces activos para la navegación. Si tengo una navegación normal como esta (con Ruby on Rails linking):

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

¿Cómo lo mantengo activo según el enlace en el que se hace clic?

Answer 1

Código más corto

Esto trata tanto de NAV como de los elementos de la lista de navegación secundaria. Puede pasar una matriz por una sola ruta y tratará ambas.

application_helper

# Active page method
def ap(p:);''active'' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end

view (html.erb)

<ul class="nav navbar-nav">
  <li class="<%= ap p: home_path %>">Home</li>
  <li class="<%= ap p: account_path %>">Account</li>

  <li class="dropdown <%= ap p: [users_path, new_user_path] %>">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Users</a>
    <ul class="dropdown-menu" role="menu">
      <li class="<%= ap p: users_path %>">Users</li>
      <li class="<%= ap p: new_user_path %>">Add user</li>
    </ul>
  </li>
</ul>

Answer 2

Acabo de hacer una respuesta sobre la misma pregunta aquí Twitter Bootstrap Pills with Rails 3.2.2

<ul class="nav">
  <li class="<%= ''active'' if params[:controller] == ''controller1'' %>"> <a href="/link">Link</a> </li>
  <li class="<%= ''active'' if params[:controller] == ''controller2'' %>"> <a href="/link">Link</a> </li>
  <li class="<%= ''active'' if params[:controller] == ''controller3'' %>"> <a href="/link">Link</a> </li>        
</ul>

Answer 3

Debe hacerlo usted mismo mediante la manipulación de clases de CSS. Es decir, si un usuario hace clic en algún enlace, entonces haga algo (acción del objetivo), establezca el enlace anterior inactivo y el nuevo enlace activo.

Si sus enlaces lo llevan al servidor (es decir, realiza la recarga de la página), entonces puede procesar el enlace activo correctamente en el servidor. De lo contrario, si está haciendo algo del lado del cliente (cambiando paneles de pestañas o lo que sea), tiene que usar javascript.

Answer 4

Escribí el método de ayuda simple usando build en view helper current_page? cuando puedes especificar un nombre de class personalizado en hash html_options .

def active_link_to(name = nil, options = nil, html_options = nil, &block)
  active_class = html_options[:active] || "active"
  html_options.delete(:active)
  html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
  link_to(name, options, html_options, &block)
end

Ejemplos (cuando estás en la ruta de root_path ):

<%= active_link_to "Main", root_path %>
# <a href="/" class="active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered" %>
# <a href="/" class="bordered active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
# <a href="/" class="bordered disabled">Main</a>

Answer 5

Esto es lo que hice:

Creé un ViewsHelper e incluí en ApplicationController:

include ViewsHelper

Dentro de ViewsHelper creé un método simple como este:

def page_state(path)
  current_page?(path) ? ''active'' : ''''
end

En mi opinión, hago esto:

<li class="<%= page_state(foobar_path) %>"><%= link_to ''Foobars'', foobar_path %></li>

Answer 6

He encontrado el éxito usando la lógica y ( && ) en haml :

%ul.nav
  %li{class: current_page?(events_path) && ''active''}
    = link_to "Events", events_path
  %li{class: current_page?(about_path) && ''active''}
    = link_to "About Us", about_path

Answer 7

Hoy tuve la misma pregunta / problema pero con otro enfoque para la solución. Creé una función auxiliar en application_helper.rb:

def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end

y el enlace se ve así:

<li class="<%= navMainAktiv(''about'')%>"><%= link_to "About", about_path %></li>

Puede reemplazar params[:action] con params[:controller] y establecer el nombre de su controlador en el enlace.

Answer 8

Muchas de las respuestas aquí tienen cosas que funcionarán, o respuestas parciales. Combiné un montón de cosas para hacer este método de carriles auxiliares que uso:

# helper to make bootstrap3 nav-pill <li>''s with links in them, that have
# proper ''active'' class if active. 
#
# the current pill will have ''active'' tag on the <li>
#
# html_options param will apply to <li>, not <a>. 
#
# can pass block which will be given to `link_to` as normal. 
def bootstrap_pill_link_to(label, link_params, html_options = {})
  current = current_page?(link_params)

  if current
    html_options[:class] ||= ""
    html_options[:class] << " active "
  end

  content_tag(:li, html_options) do
    link_to(label, link_params)
  end      
end

Se podría hacer aún más elegante con la comprobación de argumentos para apoyar &block en el enlace, etc.

Answer 9

Para cada enlace:

<% if current_page?(home_path) -%><li class="active"><% else -%><li><% end -%>
  <%= link_to ''Home'', home_path %>
</li>

o incluso

<li <% if current_page?(home_path) -%>class="active"<% end -%>>
  <%= link_to ''Home'', home_path %>
</li>

Answer 10

Parece que necesita implementar un sistema de navegación. Si es complejo, puede ser bastante feo y bastante rápido.

En este caso, es posible que desee utilizar un complemento que pueda manejar eso. Puede usar navigasmic o navegación simple (recomendaría navigasmic porque mantiene la capa principal en una vista, donde pertenece, y no en alguna configuración)

Answer 11

Puede definir un método de ayuda en application_helper.rb

def create_link(text, path)
  class_name = current_page?(path) ? ''active'' : ''''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

Ahora puedes usar como:

create_link ''xyz'', any_path que se mostraría como

<li class="active">
  <a href="/any">xyz</a>
</li>

¡Espero eso ayude!

Answer 12

Puedes usar algo como (muy similar a lo que @phil mencionado, pero un poco más corto):

<ul class="nav">
  <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>
</ul>

Answer 13

Usé un ayudante para implementar esto al estilo de los ayudantes de formularios de Rails.

En un helper (por ejemplo, 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

Luego, en una vista (por ejemplo, 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 %>

Este ejemplo produce (cuando está en la página ''usuarios''):

<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>

Answer 14

Usando ruby ​​en Sinatra ...

Estoy usando el tema básico de bootstrap, aquí está el código de barra de navegación de muestra. Tenga en cuenta el nombre de clase del elemento -> .nav - como se hace referencia en el script java.

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

en la página de vista (o parcial) agregue esto: javascript, esto debe ejecutarse cada vez que se cargue la página.

haml view snippet ->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($(''.nav'').find(''li''), function() {
              $(this).toggleClass(''active'',
                  $(this).find(''a'').attr(''href'') == window.location.pathname);
          });
      });

En el depurador de javascript, asegúrese de que el valor del atributo ''href'' coincide con window.location.pathname. Esto es ligeramente diferente de la solución de @Zitrax que me ayudó a solucionar mi problema.

Answer 15

Use esto en su lugar para seleccionar el enlace activo en Nav basado en la ruta actual sin código de servidor:

    $(document).ready(function () {
        $(''a[href="'' + this.location.pathname + ''"]'').parent().addClass(''active'');
    });

Answer 16

Ya hay muchas respuestas, pero esto es lo que escribí para que Bootstrap Icons funcione con el enlace activo. Espero que ayude a alguien

Este ayudante te dará:

1. elemento li con enlace que contiene texto personalizado
2. Icono de Bootstrap3 opcional
3. se activará cuando esté en la página correcta

Pon esto en tu application_helper.rb

def nav_link(link_text, link_path, icon='''')
  class_name = current_page?(link_path) ? ''active'' : ''''
  icon_class = "glyphicon glyphicon-" + icon

  content_tag(:li, :class => class_name) do
    (class_name == '''') ? (link_to content_tag(:span, " "+link_text, class: icon_class), link_path)
    : (link_to content_tag(:span, " "+link_text, class: icon_class), ''#'')
  end
end

Y usa el enlace:

<%= nav_link ''Home'', root_path, ''home''  %>

El último argumento es opcional: agregará un ícono al enlace. Usa nombres de íconos de glifo. Si quieres un ícono sin texto:

    <%= nav_link '''', root_path, ''home''  %>

Answer 17

Yo uso esto para cada li :

<li><%= link_to_unless_current(''Home'', root_path) { link_to(''Home'', root_path, class: ''active'') } %></li>

Answer 18

no estoy seguro si está preguntando cómo se usa Twitter bootstrap css, o el lado de los rieles. Asumo el lado de los rieles.

si es así, #link_to_if método #link_to_if o el método #link_to_unless_current

Answer 19

podrías usar tabulous para los enlaces

artículo here sobre cómo combinar tabulous con twitter bootstrap y rieles 3.x

Answer 20

https://github.com/twg/active_link_to

<%= active_link_to ''Users'', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="/users">Users</a></li>

Answer 21

Básico, sin ayuda

<%= content_tag(:li, class: (''active'' if request.path == ''/contact'')) do %>
    <%= link_to ''Contact'', ''/contact'' %>
<% end %>

Lo uso porque tengo más de una clase

<%= content_tag(:li, class: (request.path == ''/contact'' ? ''active black'' : ''black'')) do %>
    <%= link_to ''Contact'', ''/contact'' %>
<% end %>

Answer 22

  def active_navigation?(controllers_name, actions_name)
   ''active'' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

Delgado

li class=(active_navigation?([''events''], [''index'', ''show''])) = link_to t(''navbar.events''), events_path