Top > 開発ガイド > コンポーネント開発逆引きリファレンス > ボタンを配置する

ボタンを配置する

対象バージョン

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

概要

コンテンツボディ（一覧表示・詳細表示の双方）にボタンを配置するためのヘルパです

イメージ

使い方

ビューでヘルパrender_float_buttonを呼び出します。
ブロック内に実際に表示したいボタンを記述します。 

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

サンプル

<% render_float_button('float_button_area') do %>
  <!--削除ボタン-->
  <%= form_remote_tag(:url => {:controller => 'sample', :action => 'delete'},
                      :html => {:id => 'sample_delete_form',
                      :class => 'float_button_right_inactive swap'}) %>
    <input type="hidden" name="delete_id" value="<%= @sample_model.id %>" />
    <span id="sample_delete_confirm_button" class="buttons icon_delete" onclick="<%= render_confirm_window('[_Common_Delete_Confirm]', "fire_onsubmit('sample_delete_form');") %>"><%= hl('[_Common_Delete]') %></span>
  </form>
  <!--編集ボタン-->
  <div id="sample_edit_mode_form" class="float_button_right_inactive swap">
    <span id="sample_edit_mode_button" class="buttons icon_edit" onclick="FormEditor.editMode('sample_contents_area');"><%= hl('[_Common_Edit]') %></span>
  </div>
  <!--承認ボタン-->
  <%= form_tag({:controller => 'sample', :action => 'admit'}, {:id => 'sample_admit_form', :class => 'float_button_right_inactive swap'}) %>
    <input type="hidden" name="admit_id" value="<%= @sample_model.id %>" />
    <span id="sample_admit_button" class="buttons icon_admit" onclick="fire_submit('sample_admit_form');"><%= hl('[_Common_Admit]') %></span>
  </form>
<% end %>

スタイルシートのクラス

コンテンツボディに配置するボタンには下記のCSSクラスを指定します。

  • ボタン外枠(div/form)のクラス
クラス名説明
float_button_left_inactive左寄せ(float:left)になります
float_button_right_inactive右寄せ(float:right)になります
swapマウスオーバー時にfloat_button_xxx_activeクラスが適用されます
  • ボタンのクラス
クラス名説明
buttonsボタンの共通スタイルです。(必須)
icon_xxx描画されるアイコンを指定するスタイルです。

関連項目

API

render_float_button(*args, &block)

  • ボタンを配置するdivを返します。
引数必須初期値型説明
:dom_id-'float_button_area'Stringボタンを囲むdivのDOM IDとなる文字列
:swap-truebooleanロールオーバー時にスタイルの切り替えを行うかどうか
&block○--ブロック内で表示するボタンを指定します

Attachments