Top > 開発ガイド > コンポーネント開発Tips集 > レイアウト用ヘルパ > 操作バー

操作バー

対象バージョン

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

概要

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

Helperタグ

<% render_operation_bar do %>
  .
  .(実際に表示したいボタンを記述)
  .
<% end %>

<%= render_operation_bar_begin %>
  .
  .(実際に表示したいボタンを記述)
  .
<%= render_operation_bar_end %>

サンプル

<% 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 %>

• ボタン外枠(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
    • ボタンの文字色を指定するスタイルです。(必須)