如何使用 jquery-ui、haml 和 sinatra 制作制表符？

Question

我有 sinatra、jquery-ui 和 haml。我想在 haml.

这是 Sinatra rb 文件

require 'sinatra' 
get '/' do
  haml :index
end

我下载了jquery-ui-1.11.4.custom.zip并解压到public目录

然后我创建了位于 views 目录中的 index.haml 文件

%html
    %head
        %title simple tab page
        %script{:type => "text/javascript", :src  => "external/jquery/jquery.js"}
        %script{:type => "text/javascript", :src  => "jquery-ui.min.js"}
        %link{:rel => :stylesheet, :type => :"text/css", :href => "jquery-ui.min.css"}
        %link{:rel => :stylesheet, :type => :"text/css", :href => "jquery-ui.structure.min.css"}
        %link{:rel => :stylesheet, :type => :"text/css", :href => "jquery-ui.theme.min.css"}
        :javascript
            $(document).ready(function() {
                $( "#tabs" ).tabs();
            });
    %body
        %div#tabs
            %ul
                %li
                    %a{:href => "#devices-tab"}Devices
                %li
                    %a{:href => "#options-tab"}System Options
                %li
                    %a{:href => "#reports-tab"}Reports
                %li
                    %a{:href => "#notes-tab"}Notes
            #devices-tab
                Devices Page

            #options-tab
                Options Page

            #reports-tab
                Reports Page

            #notes-tab
                Notes Page

但是我得到的看起来不像UI-亮度主题

使用 ff & chrome 测试。两者都没有在控制台上显示错误。已加载所有资源（.js 和 .css）。

单击文本（Notes、Reports ..）将更新文本 'below tabs'。

使用

haml (4.0.7)
西纳特拉 (1.4.6)
在 ruby 2.0.0p481 (2014-05-08) [x64-mingw32]

有人能告诉我如何使标签工作吗？

更新

感谢@Siguza，我尝试使用 https://jqueryui.com/resources/download/jquery-ui-1.11.4.zip 并且成功了！

然后我从 http://jqueryui.com/download/ 下载自定义 build，我只是简单地单击 'download' 按钮。我没有 select 也没有取消选中任何内容。结果是这样

Answer 1

显然，检查了所有组件的自定义 jquery-ui 1.11.4 zip 与 1.11.4 stable.

不同

我下载了两个，从 tabs demo page 复制了 HTML 并修改了资源 URL 以指向本地目录：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <script src="external/jquery/jquery.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="jquery-ui.css">
  <link rel="stylesheet" href="jquery-ui.structure.css">
  <link rel="stylesheet" href="jquery-ui.theme.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

</body>
</html>

然后我将完全相同的文件放入 jquery-ui-1.11.4 和 jquery-ui-1.11.4.custom 并在我的浏览器中打开它。

jquery-ui-1.11.4:

jquery-ui-1.11.4.custom:

我想知道为什么会这样，所以我去检查了 CSS 个文件，我找到了原因：
自定义 build 中的大多数 CSS 选择器都带有 smoothness 前缀，如

smoothness .ui-helper-hidden {
    display: none;
}

稳定build使用的地方

.ui-helper-hidden {
    display: none;
}

所以我继续将 <smoothness></smoothness> 放在 HTML 中的选项卡 div 周围，结果看起来还不错

然而，我真的不知道如何看待这个发现...我想说 "the custom builds aren't broken, you just have to use them differently"，但事实并非如此 - 他们依赖于一个不存在的（阅读：无效）HTML 元素起作用，我认为是 "broken".

结论：除非您对无效 HTML 没意见，否则请远离自定义 jqueryUI builds，至少目前如此。

如何使用 jquery-ui、haml 和 sinatra 制作制表符？

How to do Tabs using jquery-ui, haml & sinatra?

haml

jquery-ui

sinatra