概要
JQuery.dialogでカスタムダイアログの作成
内容
JQuery.dialogでカスタムダイアログの作成します。
サンプル
仕様
ユーザー一覧画面の各レコード単位で表示される削除ボタンの
押下時に使用するカスタム確認ダイアログを作成します。
個別のボタンを処理時に判別出来るように、各ボタンのidは
delete + user.idに設定します。
実装
Gemfile
gem "jquery-ui-rails", "~> 4.0.4"
application.cssに下記を追加
*= require jquery.ui.all
application.jsに下記を追加
//= require jquery.ui.all
ユーザー一覧のView
user_list.html.haml
- provide(:title, "ユーザー一覧") %hr/ :javascript var Doc = { jq_confirm: function (dialog_id, yes_func, no_func) { $(dialog_id).dialog({ bgiframe: true, modal: true, show: 'bounce', // ダイアログオープン時にバウンドしながらオープン hide: 'bounce', // ダイアログクローズ時にバウンドしながらクローズ dialogClass: "jq_confirm", // ダイアログにClassを指定することで表示をカスタマイズ可能。後述のCSSにて指定 buttons: { "yes": yes_func, "no": no_func } }); } } $(document).ready(function () { $("a:contains('削除')").click(function (e) { // 「削除」という文言を含むaタグすべてにイベントを割り当てる e.preventDefault(); id = this.id.replace("delete", ""); // delete + user.idの規約で命名しておいたので、ボタンのidからユーザーIDを取得する Doc.jq_confirm("#delete-confirm-dialog" , function () { // => yesを選んだ場合はユーザー削除処理を呼び出してから閉じる。 location.href = "/user/delete?id=" + id $("#delete-confirm-dialog").dialog("close"); // => ダイアログを閉じる } , function () { // => noを選んだ場合は何もせずに閉じる $("#delete-confirm-dialog").dialog("close"); } ) }); }); %div{:class => "dialog", :id => "delete-confirm-dialog", :title => "削除確認"} %span %i{:class => "icon-bolt"} ほんとにほんとに<br />その人削除していいの? %table.main %tr %th %th =tara('user', 'id') %th =tara('user', 'name') %th =tara('user', 'login') %th =tara('user', 'email') %th =t('db.common.created_at') %th =t('db.common.updated_at') %th =t('user.deleted_at') -@users.each do |u| %tr %tr{:class => [cycle(:odd, :even), deleted_class(u.deleted_at)]} %td = link_to "/user/edit?id=#{u.id}", :class => "btn" do %i{:class => 'icon-edit'} = "編集" = link_to "/user/delete?id=#{u.id}", :class => "btn", :id => "delete#{u.id}" do %i{:class => 'icon-trash'} = "削除" = content_tag :td, u.id = content_tag :td, u.name = content_tag :td, u.login = content_tag :td, u.email = content_tag :td, show_dat(u.created_at) = content_tag :td, show_at(u.updated_at) = content_tag :td, show_at(u.deleted_at) - provide(:title, "ユーザー一覧") %hr/ :javascript var Doc = { jq_confirm: function (dialog_id, yes_func, no_func) { $(dialog_id).dialog({ bgiframe: true, modal: true, show: 'bounce', hide: 'bounce', dialogClass: "jq_confirm", buttons: { "yes": yes_func, "no": no_func } }); } } $(document).ready(function () { $("a:contains('削除')").click(function (e) { e.preventDefault(); id = this.id.replace("delete", ""); Doc.jq_confirm("#delete-confirm-dialog" , function () { location.href = "/user/delete?id=" + id $("#delete-confirm-dialog").dialog("close"); } , function () { $("#delete-confirm-dialog").dialog("close"); } ) }); }); %div{:class => "dialog", :id => "delete-confirm-dialog", :title => "削除確認"} %span %i{:class => "icon-bolt"} ほんとにほんとに<br />その人削除していいの? %table.main %tr %th %th =tara('user', 'id') %th =tara('user', 'name') %th =tara('user', 'login') %th =tara('user', 'email') %th =t('db.common.created_at') %th =t('db.common.updated_at') %th =t('user.deleted_at') -@users.each do |u| %tr %tr{:class => [cycle(:odd, :even), deleted_class(u.deleted_at)]} %td = link_to "/user/edit?id=#{u.id}", :class => "btn" do %i{:class => 'icon-edit'} = "編集" = link_to "/user/delete?id=#{u.id}", :class => "btn", :id => "delete#{u.id}" do %i{:class => 'icon-trash'} = "削除" = content_tag :td, u.id = content_tag :td, u.name = content_tag :td, u.login = content_tag :td, u.email = content_tag :td, show_dat(u.created_at) = content_tag :td, show_at(u.updated_at) = content_tag :td, show_at(u.deleted_at)
user.css.scss
.deleted { color: red; } .deleted:hover { color: red; } div.dialog { display: none; } div.jq_confirm { background-color: #E0FFFF; div { background-color: #E0FFFF; text-align:center; } }