Ruby on Rails | アイコン付きボタン風リンクの作成

概要

アイコン付きボタン風リンクの作成

内容

アイコン付きボタン風リンクを作成します。
kickstartやBootstrapなどのCSS素材を利用する際にRailsのサブミットボタン用のヘルパーメソッドでは
アイコンを表示できないため迂回する手段が必要です。
（やり方があるけど私が知らないだけかも）

仕様

・link_to_functionヘルパーを利用する
・リンクを押すとsubmitするようにJavaScriptを設定
・リンクの表示文字列にアイコンを表示するためのhtmlを埋め込み、html_safeでエスケープ処理を回避する
※コーディングミス以外ではスクリプトを埋め込めないため脆弱性はない
・リンクにはbtnというクラスを指定しておくので各位、ボタンに見えるようなスタイル指定をすること
※kickstartを利用している場合は、btnというクラス名を指定しておけばデフォルトでボタンと同じスタイルが
リンクに指定されます。

設定

kickstartのサイトからcss,jsをダウンロードする

kickstart.css,kickstart-forms.csskickstart-buttons.cssを
app/assets/stylesheetsにコピー。

application.cssに以下の設定を追加

 *= require kickstart
 *= require kickstart-forms
 *= require kickstart-buttons

サブミットの動作をリンクに持たせるためヘルパーメソッドを追加

module ApplicationHelper
  def link_to_submit(text, icon = nil)
    if icon
      display_str = "<i class=\"#{icon}\"> #{text} </i>".html_safe
    else
      display_str = text
    end
    link_to_function display_str, "$(this).closest('form').submit()", :class => "btn"
  end
end

ソースコードにスタイル指定

サインインリンクのスタイルをボタン風に設定。
リンクを押下するとヘルパー経由でJavaScriptからsubmitが実行される。

- provide(:title, "BookShelfSystem")
=form_for @signin_form, :url => {:action => 'signin'} do |signin_form|
  %p 
    =label_tag 'login', 'login'
    =text_field :signin_form, :login
  %p 
    =label_tag 'password', 'password'
    =password_field :signin_form, :password
  %p 
    =link_to_submit 'サインイン', 'icon-signin'