Ruby on Rails | JQuery.dialogでカスタムダイアログの作成

概要

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;
  }
}