Top > 開発ガイド > コンポーネント開発Tips集 > レイアウト用ヘルパ > ボタン配置

ボタン配置

対象バージョン

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

概要

リスト表示・詳細表示の双方にボタンを配置するためのHelperです

Helperタグ

<% 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 %>
  • ボタン外枠(div/form)のクラス
    • float_button_left_inactive
      • 左寄せ(float:left)になります
    • float_button_right_inactive
      • 右寄せ(float:right)になります
    • swap
      • マウスオーバー時にfloat_button_xxx_activeクラスが適用されます
  • ボタンのクラス
    • buttons
      • ボタンの共通スタイルです。(必須)
    • icon_xxx
      • 描画されるアイコンを指定するスタイルです。
  • JavaScriptのヘルパ関数