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

【问题标题】：How to create tabs in a Rails 3 app using Sass/Haml or Coffee Script如何使用 Sass/Haml 或 Coffee Script 在 Rails 3 应用程序中创建选项卡
【发布时间】：2011-09-08 22:03:41
【问题描述】：

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

谁能指导我看一些示例或教程，或者为使用这些选项中的任何一个设计基本工作流程？

我进行了一些搜索，但最接近的是一些 JQuery 示例，而 Sass 则没有。由于 Sass 或多或少是 CSS 的抽象，我是否应该从那里的一些 CSS 示例逆向工作？

我知道这是一个开放式的请求，但开源中有很多选择、风格和意见。因此，我会尽量缩小范围以找到最佳实践……

提前致谢。

【问题讨论】：

标签： css ruby-on-rails-3 tabs sass coffeescript

【解决方案1】：

我在一些 Rails 应用程序中使用了jQuery UI Tabs。这是您可以查看的一个选项。

【讨论】：

【解决方案2】：

jQuery UI 很好，jQuery Tools 也很好。

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

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

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

【讨论】：