`

使用content_for实现tab分页的好处

    博客分类:
  • RUBY
 
阅读更多
与异步刷新更新局部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' %>
0
1
分享到:
评论

相关推荐

    jquery 文章分页jQuery分页的解决图片和内容分页显示

    同时,为键盘用户和屏幕阅读器提供友好的导航,例如通过Tab键和Enter键操作分页。 总的来说,使用jQuery实现文章分页和图片分页显示,需要结合HTML、CSS、AJAX以及可能的插件来完成。通过合理的数据处理和界面交互...

    tab 页面切换

    &lt;div id="tab1" class="tab-content"&gt;Content for Tab 1 &lt;div id="tab2" class="tab-content"&gt;Content for Tab 2 &lt;div id="tab3" class="tab-content"&gt;Content for Tab 3 ``` CSS可以用来隐藏所有非活动的`tab-...

    jQuery-ui-tabs 分页相关

    &lt;div id="tabs-1"&gt;Content for Tab 1 &lt;div id="tabs-2"&gt;Content for Tab 2 ``` 随后,在 `ui分页1.js` 文件中,你可以编写分页逻辑,如: ```javascript $(function() { $("#tabs").tabs(); // 假设有一...

    可以滑动界面切换tab

    import android.content.Intent; import android.os.Bundle; import android.view.GestureDetector; import android.view.GestureDetector.OnGestureListener; import android.view.LayoutInflater; import android....

    jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据

    &lt;div id="tab1" class="tabContent"&gt;Content for Tab 1 &lt;div id="tab2" class="tabContent"&gt;Content for Tab 2 &lt;div id="tab3" class="tabContent"&gt;Content for Tab 3 ``` 接下来,我们需要使用jQuery来实现...

    简单易用的TabSheet类

    tabbedPane.addTab("Tab 1", createContentPanel("Content for Tab 1")); tabbedPane.addTab("Tab 2", createContentPanel("Content for Tab 2")); // 设置默认选中的Tab tabbedPane.setSelectedIndex(0); //...

    一种理论上最快的Web数据库分页方法

    为了解决这一问题,本文提出了一种理论上最快的Web数据库分页方法,并详细介绍了其实现思路和具体步骤。 #### 二、现有分页方法存在的问题 现有的分页方法主要有以下几种: 1. **基于OFFSET的分页**:这是最常见...

    jquery tabs

    &lt;div id="tab1"&gt;Content for Tab 1 &lt;div id="tab2"&gt;Content for Tab 2 &lt;div id="tab3"&gt;Content for Tab 3 ``` 2. **CSS样式**:CSS用于定义每个标签页的外观,包括颜色、边框、字体等。可以使用内联样式,也...

    分类浏览界面代码实例

    例如,可以使用`RecyclerView`配合`PagingLibrary`来实现高效的数据分页加载。 4. **UI设计**:为了提供良好的用户体验,分类浏览界面应该具有清晰的视觉层次和易于理解的交互设计。例如,每个Tab可以使用不同的...

    jqueryui tabs

    &lt;div id="tab1" class="ui-tabs-panel"&gt;Content for Tab 1 &lt;div id="tab2" class="ui-tabs-panel"&gt;Content for Tab 2 &lt;div id="tab3" class="ui-tabs-panel"&gt;Content for Tab 3 ``` 2. **CSS 样式**:`jquery...

    63套Axure组件库

    Content.rplib DGI_touchscreen_handgestures.rplib EXTJS-Tab.rplib facebook-like.rplib icon-UX_People.rplib Icons_Audio.rplib iOS iPad Wireframe.rplib ipad.rplib iPhone-Bodies.rplib iPhone-Horizontal....

    android 横向翻图效果 实例

    在Android开发中,横向翻图效果通常用于实现类似相册或滚动浏览图片的功能。这种效果可以给用户带来流畅且自然的交互体验。本实例将深入探讨如何在Android应用中实现这样的功能。 首先,我们需要理解Android的...

    jquery-easyui中文详细说明文档

    Content for Tab 1 &lt;div title="Tab 2"&gt; Content for Tab 2 ``` JavaScript 初始化: ```javascript $('#tabs').tabs(); ``` 3. jQuery EasyUI 提示框(Messager)用法: Messager 可以用来显示各种...

    primefaces 中文文档

    &lt;h:outputText value="Content for Tab 2"/&gt; &lt;/p:tab&gt; ``` 这个例子展示了如何使用 `&lt;p:tabView&gt;` 创建两个标签页,并为每个标签页添加内容。 #### 五、更多组件介绍 除了上述介绍的一些基础组件之外,...

    Web前端开发中级实操考试评分细则1

    *tab-content_:是一种 HTML 元素,用于定义标签页的内容,通常用于网站的主页或详情页。 *home_:是一种 HTML 元素,用于定义首页,通常用于网站的首页。 *carousel_:是一种 Bootstrap 框架中的组件,用于创建轮播...

    Multiselect DropDown ListBox control for Web Applications

    2. **键盘导航**:提供良好的键盘导航支持,如使用Tab键切换焦点,Enter或Space键进行选择,Esc键关闭下拉菜单。 3. **可访问性**:遵循Web Content Accessibility Guidelines (WCAG),确保视障用户也能通过屏幕...

    项目开发中css用图片素材

    4. **Tab样式**:Tab控件常用于展示分页或切换内容,CSS可以实现不同状态(如激活、悬停、禁用)的样式变化。例如: ```css .tab { display: inline-block; cursor: pointer; } .tab.active { background-...

    jQuery移动端选项卡内容加载特效代码

    &lt;div id="tab1"&gt;Content for Tab 1 &lt;div id="tab2" style="display:none;"&gt;Content for Tab 2 ``` ```javascript $('.tabs li a').click(function(e) { e.preventDefault(); var target = $(this).attr('href'); ...

    ExtJS帮助文档

    ### ExtJS基础知识与... html: 'Content for Tab 2' }] }); ``` 通过以上内容的学习,你应该已经掌握了ExtJS的基础知识和一些常用组件的用法。接下来可以进一步深入学习更多高级特性,如自定义组件、数据绑定等。

    产品经理Axure元件库.zip

    经常使用的Axure元件库,清单如下: 10PX Android.rplib acleandesign better默认值5.5 rplib android widget by YEFAN.rplib Android手机外壳及U1组件库.rplib Android组件库rplib 音频图标Axure Library.rplib ...

Global site tag (gtag.js) - Google Analytics