在Rails应用程序中开始使用选项卡

Question

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

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

我遇到了这个question，其中包含以下解决方案：

  

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

     

  
1. 现在每个标签可以很容易地成为不同的视图/控制器
  
2. 您只需在使用时加载标签的内容;您不会为用户不使用的标签处理代码/下载html。
  

问题是我是Rails的新手，并且不知道如何做到这一点。有人能指出一些有助于解释如何设置的资源吗？我将在个人资料数据和消息之间切换到用户。

非常感谢任何帮助。

Answer 1

由于您是Rails的新手，我建议将您的目标分为两部分：首先，让标签使用简单的内容，然后添加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

Answer 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是最新的或正常的，您将需要这些信息。

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

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

%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＆gt;内的标签列表标题＃侧
• = yield：呈现视图中控制器操作的所有内容。在我们的案例中，首先是索引页面，可能是编辑或显示页面。