Top > 開発ガイド > コンポーネント開発Tips集 > Spinelzヘルパ > render_tab_box

render_tab_box

概要

  • Tab Box用ヘルパーです。
  • Tab Boxを直接利用するよりも高速に描画することができます。

利用方法

記述例 

<% render_tab_box('sample_tab_box_id', 'rubricks.sample.tab_box') do %>
  <%= render_tab_box_tab('TAB1', {:id => 'sample_tab1'}) %>
  <% render_tab_box_panel({:id => 'sample_tab1_contents'}) do %>
    <%= render :partial => 'tab1_contents' %>
  <% end %>
  <%= render_tab_box_tab('TAB2', {:id => 'sample_tab2'}) %>
  <% render_tab_box_panel({:id => 'sample_tab2_contents'}) do %>
    <%= render :partial => 'tab2_contents' %>
  <% end %>
  <%= render_tab_box_tab('TAB3', {:id => 'sample_tab3'}) %>
  <% render_tab_box_panel({:id => 'sample_tab3_contents'}) do %>
    <%= render :partial => 'tab3_contents' %>
  <% end %>
<% end %>

上記の記述は、Tab Boxを直接利用して、下記のように記述することと同じ結果が得られます。 

<div id="sample_tab_box_id" style="display:none">
  <div>
    <h3 id="sample_tab1" class="rubricks_general_tabBox_tab">TAB1</h3>
    <div id="sample_tab1_contents">
      <%= render :partial => 'tab1_contents' %>
    </div>
  </div>
  <div>
    <h3 id="sample_tab2" class="rubricks_general_tabBox_tab">TAB2</h3>
    <div id="sample_tab2_contents">
      <%= render :partial => 'tab2_contents' %>
    </div>
  </div>
  <div>
    <h3 id="sample_tab3" class="rubricks_general_tabBox_tab">TAB3</h3>
    <div id="sample_tab3_contents">
      <%= render :partial => 'tab3_contents' %>
    </div>
  </div>
</div>
<script type="text/javascript">
  rubricks.sample.tab_box = new TabBox('sample_tab_box_id');
</script>

API

render_tab_box(element_id, variable, js_options = {}, &block)

引数説明
element_id生成されるTableタグのDOM ID
variableインスタンスを格納する変数
js_optionsTab Boxに渡されるオプション(参照)

render_tab_box_tab(title, html_options = {}, &block)

引数説明
titleタブの表示文字列
html_optionsH3タグのAttribute

render_tab_box_panel(html_options = {}, &block)

引数説明
html_optionsDivタグのAttribute