Question

I’d like to create some tabbed views for displaying content in a Rails 3 app I’m working on. Since I’m relatively new, I figured I’d try to use tools/resources that are core to Rails 3/3.1. With Sass and Coffe Script being adopted in 3.1, I figured I’d start with those two.

Can anyone direct me to some examples or tutorials, or layout the basic workflow for using either of these options?

I’ve done some searching, but the closest I come is some JQuery examples and none for Sass. Since Sass is more or less an abstraction of CSS, should I just work backwards from some of the CSS examples out there?

I realize this is an open-ended request, but there’s so many options, styles and opinions in open-source. So, I try to narrow things down to best-practices when I can…

Thanks in advance.

Answer 1

jQuery UI is good, as is jQuery Tools.

It’s also not very hard to home-grow your own solution (with jQuery). Basically, you just want to show a different div each time a different li is clicked. Let’s say that each li has an id that’s just the div‘s plus -tab, e.g. there’s an #about div and a #about-tab list item. Here’s how the basic logic might work:

# 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()

Styling-wise, start with list-style: none on ul.tab and display: inline-block on the ul.tab li, give ul.tab li.selected a different background color, then tweak from there.

Of course, using an existing plugin is less work and gives you more advanced features and some nice chrome, but doing it yourself gives you a better understanding, more efficient JS, and lets you style everything in ways that might better fit your app.