【问题标题】: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: noneul.tab li 上的display: inline-block 开始,给ul.tab li.selected 一个不同的背景颜色,然后从那里进行调整。

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

      【讨论】:

        猜你喜欢
        • 2013-09-03
        • 2011-04-08
        • 2014-01-05
        • 1970-01-01
        • 1970-01-01
        • 2012-03-14
        • 1970-01-01
        • 2018-03-02
        • 2011-02-13
        相关资源
        最近更新 更多