Как создавать вкладки в приложении Rails 3, используя Sass / Haml или Coffee Script - PullRequest
Новая
       5

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

1 голос
/ 06 июня 2011

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

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

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

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

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

Ответы [ 2 ]

3 голосов
/ 06 июня 2011

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 другой цвет фона, затемотладка оттуда.

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

1 голос
/ 06 июня 2011

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

...