Рельсы 3 - Динамический пункт меню - PullRequest
Новая
       0

Рельсы 3 - Динамический пункт меню

0 голосов
/ 27 ноября 2010

У меня есть частичное меню HTML, и я хочу, чтобы пункты меню были динамическими (меняющими цвета) в зависимости от того, на какой странице мы находимся.Как я могу это сделать?

Спасибо

Ответы [ 3 ]

2 голосов
/ 27 ноября 2010

Обычный трюк, который используется для изменения внешнего вида меню для отображения текущей страницы, - это поместить селектор или класс CSS, который отражает имя страницы, в теге body.

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

Например: 

<!-- @page_name is 'home' in this example -->
<body class="<%= @page_name %>">

  <!-- Lots of html here -->

  <div class="nav_links">
    <ul id="nav">
      <li class="home"><a href="/"><span>Home</span></a></li>
      <li class="about_us"><a href="/about"><span>About us</span></a></li>
      <li class="store"><a href="/store"><span>Shop</span></a></li>
    </ul>
  </div>

Тогда CSS может быть чем угодно, но что-то вроде: 

body.home div.nav_links ul li.home { /* blah blah */ }
body.about_us div.nav_links ul li.about_us { /* blah blah */ }

Этот метод обеспечивает хорошее разделение задач: визуальные стили (изменение ваших цветов) остаются в ваших таблицах стилей и вне вашего кода.

0 голосов
/ 28 ноября 2010

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

  def active_tab(id)
    if id == menu_entry_id
      'active'
    else
      'tab'
    end
  end

  def menu_entry_id
    if controller_path.match('/')
      controller_path.gsub!('/', '_')
    else
      controller_path
    end
  end

Пример меню 

%li{:class => "#{active_tab 'admin_dashboard'}"}= link_to 'Dashboard', admin_dashboard_path
%li{:class => "#{active_tab 'admin_customers'}"}= link_to 'Customers', admin_customers_path

Как вы видите в active_tab, я передаюожидаемый результат от controller_path (/ заменяется на _).Active_tab сравнивает свои входные данные с результатом controller_path и возвращает активное их как много, так и просто табуляцию.

Я думаю, что могут быть другие способы сделать это, но я не смог придумать что-то лучшее.

0 голосов
/ 27 ноября 2010

Создайте помощник для генерации html для меню и используйте переменную controller.controller_name для изменения класса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...