Блог

Главная - Вопросы по программированию - Как создавать вкладки в приложении Rails 3 с помощью Sass / Haml или Coffee Script

Как создавать вкладки в приложении Rails 3 с помощью Sass / Haml или Coffee Script

#css #ruby-on-rails-3 #tabs #sass #coffeescript

#css #ruby-on-rails-3 #вкладки #sass #coffeescript

Вопрос:

Я хотел бы создать несколько представлений с вкладками для отображения контента в приложении Rails 3, над которым я работаю. Поскольку я относительно новичок, я решил попробовать использовать инструменты / ресурсы, которые являются основными для Rails 3/3.1. Поскольку Sass и Coffe Script были приняты в 3.1, я решил начать с этих двух.

Кто-нибудь может направить меня к некоторым примерам или руководствам или разметить базовый рабочий процесс для использования любого из этих параметров?

Я провел некоторый поиск, но самое близкое, что я нашел, это несколько примеров jQuery и ни одного для Sass. Поскольку Sass — это более или менее абстракция CSS, должен ли я просто работать в обратном направлении от некоторых примеров CSS там?

Я понимаю, что это открытый запрос, но в open-source есть так много опций, стилей и мнений. Итак, я стараюсь сузить круг вопросов до лучших практик, когда могу…

Заранее спасибо.

Ответ №1:

jQuery UI хорош, как и jQuery Tools.

Также не очень сложно создать собственное решение (с помощью jQuery). По сути, вы просто хотите показывать разные вкладки div при каждом нажатии на разные li . Допустим, что у каждой li есть идентификатор, который является просто div плюсом -tab , например, есть #about div и #about-tab элемент списка. Вот как может работать базовая логика:

 # Handle tab clicks
$('ul.tabs li').click ->
  $tab = $(this)
  oldDivId = $tab.siblings(':selected').removeClass().attr('id')[0...-4]
  if oldDivId then $("##{oldDivId}").hide()
  newDivId = $tab.attr('id')[0...-4]
  $("##{newDivId}").show()
  $tab.addClass 'selected'

# Initially select the first tab in each tab list by simulating clicks
$('ul.tabs').each ->
  $(this).children().first().click()

Что касается стиля, начните с list-style: none вкл ul.tab и display: inline-block на ul.tab li , придайте ul.tab li.selected другой цвет фона, затем настройте его оттуда.

Конечно, использование существующего плагина требует меньше усилий и предоставляет вам более продвинутые функции и немного приятного chrome, но самостоятельное выполнение дает вам лучшее понимание, более эффективный JS и позволяет вам стилизовать все таким образом, чтобы это лучше соответствовало вашему приложению.

Ответ №2:

Я использую вкладки пользовательского интерфейса jQuery в нескольких своих приложениях Rails. Это один из вариантов, который вы можете рассмотреть.