[wiki:WikiStart Top] > [wiki:RubricksDevelopmentGuideJa 開発ガイド] > [wiki:RubricksDevelopmentQuickReferenceJa コンポーネント開発逆引きリファレンス] > 操作バーを表示する

= 操作バーを表示する =
== 対象バージョン ==
当ドキュメントは'''Rubricks-0.6.x'''向けです。

== 概要 ==
コンテンツの共通操作を実施するボタン(インポート・エクスポートや印刷等)を配置します。

== 使い方 ==
ビューでヘルパ'''[wiki:RubricksDevelopmentQuickReferenceLayoutHelper01Ja#render_operation_bar render_operation_bar]'''を呼び出します。
ブロック内に実際に表示したいボタンを記述します。

{{{
<% render_operation_bar do %>
  <div id="operationbar_button_print" class="operationbar_button_right_inactive swap">
    <span class="buttons darkicon_print disabled textcolor_white" onclick="alert('Print');"><%= hl('[_Common_Print]') %></span>
  </div>
  <div id="operationbar_button_new" class="operationbar_button_left_inactive swap">
    <span class="buttons darkicon_new textcolor_white" onclick="alert('New');"><%= hl('[_Common_New]') %></span>
  </div>
<% end %>
}}}
以下の記述方法でも操作バーを表示することができます。

{{{
<%= render_operation_bar_begin %>
  .
  .(実際に表示したいボタンを記述)
  .
<%= render_operation_bar_end %>
}}}
=== スタイルシートのクラス ===
操作バーに表示するボタンには下記のCSSクラスを指定します。

 * ボタン外枠(div/form)のclass
||クラス名||説明||
||operationbar_button_left_inactive||操作バー内で左寄せ(float:left)になります||
||operationbar_button_right_inactive||操作バー内で右寄せ(float:right)になります||
||swap||マウスオーバー時にoperationbar_button_xxx_activeクラスが適用されます||
 * ボタン(span)のclass
||クラス名||説明||
||buttons||ボタンの共通スタイルです。(必須)||
||darkicon_xxx||描画されるアイコンを指定するスタイルです。||
||textcolor_white||ボタンの文字色を指定するスタイルです。(必須)||

== 関連項目 ==
[wiki:RubricksDevelopmentQuickReferenceLayoutMainContentsJa メインコンテンツを表示する]

== API ==
==== render_operation_bar(&block) ==== #render_operation_bar
 * 操作バーを表示します。
||引数||必須||初期値||型||説明||
||&block||○||-||-||操作バーに表示するボタン||