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

操作バーを表示する

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

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

使い方

ビューでヘルパ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ボタンの文字色を指定するスタイルです。(必須)

関連項目

メインコンテンツを表示する

API

render_operation_bar(&block)

  • 操作バーを表示します。
引数必須初期値型説明
&block○--操作バーに表示するボタン