Ruby on Rails подсвечивает текущую ссылку на панели навигации? - PullRequest
Новая
       27

Ruby on Rails подсвечивает текущую ссылку на панели навигации?

7 голосов
/ 26 сентября 2011

Может кто-нибудь сказать мне, как выделить (цветом) текущую ссылку на панели навигации, используя css? Я не хочу использовать опцию контроллера. Вот код из shared / menu.html.erb: 

 <div id = "navigation">

  <ul>

  <li id="menu"><%=link_to "Menu", menus_path, :class => "menunav"%></li>
 <li id="drink"><%=link_to " Drinks", drinks_path, :class => "drinknav"%> </li>

 </ul>

 </div>

Ответы [ 3 ]

7 голосов
/ 26 сентября 2011

Первый подход заключается в обработке текущих controller_name и action_name , чтобы определить, на какой странице вы находитесь. Это хорошо, но добавляет немного серверной части к клиентскому шаблону. Хелпер рельсов использует этот путь: link_to_unless_current . Минимальное использование JS. Смотрите пример здесь

Второй - проанализировать $ (местоположение) и напрямую добавить определенный класс к выбранному элементу навигации, чтобы выделить его.

Третий (зависит от объекта) - это создание объекта JS с текущим состоянием объекта и добавление методов для добавления класса в активную навигационную систему. Затем вы можете создать экземпляр этого класса JS, передав объект и сохранив логику в инкапсуляции.

4 голосов
/ 26 сентября 2011

Нечто подобное будет работать для вас.Конечно, вам придется настроить его в соответствии с вашими целями, может быть, вы получите более изощренные совпадения (в настоящее время это будет соответствовать только путям, как у вас в вашем примере). 

$("#navigation a[href="+window.location.pathname+"]")
  .closest('li')
    .css('background-color', '#ff0');

Еще лучше, вы 'Определите где-нибудь «текущий» класс, а затем просто добавьте его: 

/* in some stylesheet */
#navigation li.current { background-color: #ff0; }

/* then the js */
$("#navigation a[href="+window.location.pathname+"]")
  .closest('li')
    .addClass('current');
3 голосов
/ 26 сентября 2011

Есть несколько подходов к этому, но если вам нужен простой, я предлагаю добавить класс к вашему телу. 

<body class="<%= params[:controller] %>_controller">
  ...
</body>

Тогда в вашем css вы можете сделать следующее. 

body.menus_controller  #navigation a.menunav,
body.drinks_controller #navigation a.drinknav {
  background-color : yellow
  color : blue
}

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

...