Rails で twitter bootstrap を使うときの備忘
rails で twitter bootstrap を使おうとすると、エラーメッセージが綺麗に表示されないので、どうするかのメモがき
Railsが規定で用意している error タグを抑止
application.rb に以下を追記するだけ
ActionView::Base.field_error_proc = Proc.new { |html_tag, instance| html_tag }
これでエラーになった項目が
<div class="field_with_errors"></div>
で囲まれることがなくなります。
自前で error を追加する
そのままだと、エラーの項目がまっさらになってしまうので、自前で _form.html.erb などで
<div class="control-group <%= @member.errors[:name].empty? ? '' : 'error' %>">
のようにすることで、twitter bootstrap っぽい雰囲気でエラーが表示される。
datepickerを使う
Rails の select_date ヘルパーはイマイチなので、それっぽいやつを
http://www.eyecon.ro/bootstrap-datepicker
から拾ってきて、vendor/assets/javascripts と vendor/assets/stylesheets にファイルを起く。less は気にしない。
app/assets/javascripts/application.js と app/assets/stylesheets/application.css で適当に datepicker を require しておく
app/views/tasks/new.html.erb
<div class="control-group <%= @task.errors[:due_date].empty? ? '' : 'error'%>" > <%= f.label :due_date, class: 'control-label' %> <div class="controls"> <%= f.text_field :due_date, class: 'span2', value: Date.today.strftime('%Y/%m/%d') %> </div> </div>
こんなん書いて、対応する input タグに対して
$ ->
$("input[id='task_due_date']").datepicker({ format: 'yyyy/mm/dd' })て感じか。
ダイアログを変更する
モーダルダイアログとしてhttp://twitter.github.com/bootstrap/javascript.html#modalsを使う
これも単純に提供されている js ファイルを vendor/assets/javascripts に置く。例えばscaffoldで作成される一覧画面の削除ボタンを変更して、モーダルダイアログを表示させる
変更前
<td><%= link_to '削除', task, method: :delete, confirm: '本当に削除しますか？' %>
変更後
<%= content_tag :div, '削除', class: 'btn btn-mini btn-danger', data: {toggle: "modal", target: "#delete_#{task.id}"} %>
ただの div タグになったので、ボタンを押して呼び出されるtargetを別に用意する
<div class="modal hide" id="delete_<%= task.id %>"> <div class="modal-header"> <button class="close" data-dismiss="modal">x</button> <h3>削除してもよいですか？</h3> </div> <div class="modal-footer"> <%= link_to "削除", task, method: :delete, class: 'btn btn-danger' %> <%= link_to "キャンセル", nil, class: 'btn' %> </div> </div>
これを _delete_task.html.erb とでもしておいて、
<%= render partial: 'delete_task', locals: {task: task} %>
などとして書いておく
