Как я могу условно оформить <li>в рельсах? - PullRequest
Новая
       1

Как я могу условно оформить <li>в рельсах?

7 голосов
/ 21 февраля 2010

У меня есть приложение rails, использующее ul в качестве панели инструментов. Я хочу, чтобы стиль (выбранный) применялся к странице, на которой находится пользователь.

Как я могу это сделать?

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

      <ul>
        <li class="firstItem"><%= link_to "About", '/about' %></li>
        <li class="item"><%= link_to "Page1", '/page1' %></li>
        <li class="item selected" <%= link_to "Page2", '/page2' %></li>
        <li class="item"><%= link_to "Contact", '/contact' %></li>
        <li class="lastItem"><%= link_to "Blog", '/blog' %></li>
      </ul>

Ответы [ 3 ]

8 голосов
/ 22 февраля 2010

Я полностью согласен с советом Джаррода, но на тот случай, если вы столкнетесь с необходимостью обработки дополнительных условий (и хотите избежать уродливого внедренного рубина в ваш HTML-код), взгляните на метод Rails content_tag.

С его помощью вы можете заменить что-то вроде: 

<li class=<%= @post.active? ? 'active' : 'suspended' %>>
  <%= link_to @post.name, post_path(@post) %>
</li>

С чем-то вроде: 

<%= content_tag :li, link_to(@post.name, post_path(@post), :class => @post.active? ? 'active' : 'suspended' %>

И, конечно, вставка этого кода в помощника и вызов его оттуда принесет вам больше очков элегантности.

Надеюсь, это поможет.

PS: Это мой первый пост на Stackoverflow, пожалуйста, будьте осторожны. :)

5 голосов
/ 21 февраля 2010

если каждый li связан с различным контроллером, вы можете использовать controller_name, чтобы добавить или нет selected класс

Вот пример из моего приложения, он в хамле 

  %ul
    %li
      %a{:href => '/kebabs', :class => ('current' if controller_name == 'kebabs')} Admin kebabs
    %li
      %a{:href => '/statistics', :class => ('current' if controller_name == 'statistics')} Statistiques
    %li
      %a{:href => '/people', :class => ('current' if controller_name == 'people')} Admin Personnes

ура

1 голос
/ 21 февраля 2010

Вы также можете использовать CSS для этого. Дайте каждому телу каждой страницы свой класс и идентификатор из вашего контроллера и имен действий. 

<body class="<%= controller.controller_name %>" id="<%= controller.action_name %>">

Затем присвойте элементам ul и li идентификатор. 

<ul id="nav'>
  <li id="about"></li>
  <li id="contact"></li>
  <li id="blog"></li>
</ul>

Теперь вы можете ссылаться на конкретную ссылку на определенной странице из вашей таблицы стилей. 

body.blog#index ul#nav a#blog:link

Так что, если вы хотите сделать ссылки на разделы «липкими», вы можете ссылаться на них все сразу, оставляя идентификатор тела. 

body.blog ul#nav a#blog:link,
body.contact ul#nav a#contact:link {
  background-color: red;
}

Подробнее о селекторах CSS.

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

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

...