Rails 应用程序中的选项卡入门答案

【问题标题】：Getting started with tabs in Rails appRails 应用程序中的选项卡入门
【发布时间】：2011-09-23 14:19:55
【问题描述】：

我在这里研究如何在我的 Rails 应用程序中实现选项卡式界面。例如，我喜欢 Ryan Bates 在他的 Railscast 概览页面中使用它的方式。

我想在我的 Rails 应用程序中模仿这一点，以便用户的个人资料中有一个带有两个或三个链接的导航。单击任一链接使用 AJAX 加载信息（我猜）。然后网址显示/profiles/1/view?info或/profiles/1/view?otherdata

我遇到了这个question，解决方案如下：

我会通过单独的 ajax 请求调用每个选项卡的内容。这将为您带来以下好处

现在每个选项卡都可以轻松成为不同的视图/控制器

只需要在使用时加载标签的内容即可；您不会为用户不使用的标签处理代码/下载 html。

问题是我是 Rails 新手，不知道该怎么做。谁能指出我一些有助于解释如何设置的资源？我会在个人资料数据和给用户的消息之间切换。

任何帮助将不胜感激。

【问题讨论】：

标签： ajax ruby-on-rails-3 tabs

【解决方案1】：

由于您是 Rails 新手，我建议将您的目标分为 2 个部分：首先，让选项卡处理简单的内容，然后添加 AJAX。

第 1 步 - 让标签正常工作

查看 JQuery UI 选项卡演示：http://jqueryui.com/demos/tabs/

代码如下所示：

<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.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</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.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.</p>
  </div>
</div>

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

第 2 步 - 让 AJAX 工作

签出：http://jqueryui.com/demos/tabs/#ajax

【讨论】：

谢谢。快速提问：如果一个选项卡从 ProfilesController 中加载信息，而另一个选项卡从另一个控制器加载信息，我该怎么做？
@tvalent2 - 在您为选项卡加载指定的 URL 中，只需使用路由到您需要的任何控制器操作。例如，一个选项卡可能从<%= profile_url(@profile) %> 加载，另一个可能从<%= other_url(@other) %> 加载。
谢谢！我发现<%= link_to %> 将a href 渲染到#ui-tabs-1，但是对于我需要使用的 div 是否有特定的 erb？
@tvalent2 - 你应该使用普通的 html 来渲染你的 .html.erb 文件中的 div，只需在必要的地方添加 .erb。
搞定了，谢谢！经过一番摆弄，我意识到缺少的组件是一个 jQuery UI 样式表。所以我加入了一个，效果很好。

【解决方案2】：

即使今天使用 AJAX 可能很时髦，为什么不使用 Simplest Thing That Could Possibly Work？如果过去做过类似以下的事情：

通过如下代码向 UI 添加标签（符号是 HAML，对此感到抱歉）。结果，您将获得链接到控制器索引操作的链接列表。此代码是文件layouts/_header.html.haml 的一部分。

%ul.sideul
  - ["page", "notice", "contact"].each do |thing|
    - curr = controller.controller_name.singularize == thing
    - cl = curr ? 'current' : 'normal'
    %li.normal= link_to(thing.humanize, {:controller => controller, :action => "index"}, {:class => cl })

然后将 CSS 添加到您的应用程序中，使其显示为选项卡。如果li 是当前的或正常的，您将需要该信息。

每次在选项卡上单击 then 时，都会调用该控制器的索引操作，然后显示索引页面。

您的文件layouts/application.html.haml 应具有以下内容（至少）。我已经跳过了该示例不需要的内容。模板取自 Rails 的 html5-boilerplate。

%body{ :class => "#{controller.controller_name}" }
  #columns
    %header#side
      = render "layouts/header"

    #main{ :role => 'main' }
      %h1= yield(:title)
      = render "layouts/flashes"
      = yield

  = render "layouts/javascripts"

此解决方案的相关部分是：

= render "layouts/header": 在#columns > header#side 中渲染标签列表
= yield：为控制器的操作渲染视图中的任何内容。在我们的例子中，首先是索引页面，之后可能是编辑或显示页面。

【讨论】：