如何使用Sass/Haml或Coffee Script在Rails3应用程序中创建选项卡

Question

我想创建一些选项卡视图，用于在我正在开发的Rails 3应用程序中显示内容。由于我相对较新，我想我会尝试使用Rails 3/3.1的核心工具/资源。随着Sass和Coffe Script在3.1中被采用，我想我应该从这两个开始。

有人能告诉我一些例子或教程，或者为使用这两个选项中的任何一个布局基本的工作流程吗？

我已经做了一些搜索，但最接近的是一些JQuery示例，而不是Sass。既然Sass或多或少是CSS的抽象，我应该从一些CSS示例向后看吗？

我意识到这是一个开放式的请求，但开源有很多选择、风格和观点。所以，我尽可能把事情缩小到最佳实践。。。

提前谢谢。

Answer 1

jQuery UI和jQuery Tools都很好。

在家中开发自己的解决方案（使用jQuery）也不难。基本上，您只想在每次单击不同的li时显示不同的div。假设每个li都有一个id，它只是div的加上-tab，例如有一个#aboutdiv和一个#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()

从风格上讲，从ul.tab上的list-style: none和ul.tab li上的display: inline-block开始，给ul.tab li.selected一个不同的背景色，然后从那里进行调整。

当然，使用现有的插件工作量较小，可以为您提供更高级的功能和一些漂亮的chrome，但自己动手可以让您更好地理解、更高效的JS，并可以让您以更适合应用程序的方式设计所有内容。

Answer 2

我在一些Rails应用程序中使用jQuery UI选项卡。这是你可以看到的一个选项。