使用content_for实现tab分页的好处

最新推荐文章于 2022-12-24 20:23:22 发布

最新推荐文章于 2022-12-24 20:23:22 发布 · 371 阅读

文章标签：

#ui

RUBY 专栏收录该内容

171 篇文章

订阅专栏

与异步刷新更新局部tab div相比，全局刷新可以有利于外部连接的直接跳转到对应tab
在此前提下，用content_for来实现多tab效果不错！
page: crm/companies/show


<div class="ui grid">
  <div class="left floated fourteen wide column">
    <a style="font-weight:bold; color:black; font-size:17px;">Company Detail</a> <<%= link_to "Company List", crm_companies_path %>
  </div>
</div>
<div class="ui blue segment">
  <!-- 基本信息 -->
  <h3 class="ui dividing header">
    Basic Information
    <%= link_to edit_crm_company_path(@company), remote: true do %>
      <i class="edit icon"></i>
    <% end %>
  </h3>
  <%= render 'crm/companies/basic_info' %>
  <div class="ui attached tabular menu archives">
    <%= link_to 'Accounts', crm_accounts_path(company_id: @company.id), class: active_helper(controller: 'accounts') %>
    <%= link_to 'Contacts', crm_contacts_path(company_id: @company.id), class: active_helper(controller: 'contacts') %>
  </div>
  <div class="ui bottom attached segment">
    <%= yield :company_detail %>
  </div>
</div>

page:crm/accounts/index


<% content_for :company_detail do %>
  <table class="ui celled table">
    <thead>
    <tr>
      <th class="center aligned">User Name</th>
      <th class="center aligned">Account / Email</th>
      <th class="center aligned">Mob | Tel</th>
      <th class="center aligned">Account Status</th>
      <th class="center aligned">Vendor Status</th>
      <th class="center aligned">Action</th>
    </tr>
    </thead>
    <tbody>
      <%= render partial: 'list', collection: @contacts, as: :contact %>
    </tbody>
  </table>
<% end %>
<%= render 'crm/companies/show' %>