#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. Это один из вариантов, который вы можете рассмотреть.