オフィシャルサイトとダウンロード先: http://t4t5.github.io/sweetalert/ 2016年10月30日14:10:21

PHPのAPI開発が進む中、フロントエンドでのデータ処理が一般的となり、ユーザー体験の向上が求められています。

• 基本的なメッセージポップアップ

swal("メッセージの表示")

• タイトル付きのメッセージポップアップ

swal("タイトルの表示", "補足説明の追加")

• 成功通知のポップアップ

swal("完了しました！", "ボタンクリックありがとうございます", "success")

• 確認機能付きの警告ポップアップ

swal({
  title: "実行しますか？",
  text: "この仮想ファイルは復元できません！",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "削除を実行",
  closeOnConfirm: false
},
function(){
  swal("削除完了！", "仮想ファイルを削除しました。", "success");
});

• キャンセルボタンのカスタマイズ

swal({
  title: "実行しますか？",
  text: "この仮想ファイルは復元できません！",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "削除を実行",
  cancelButtonText: "キャンセルしてください",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("削除完了！", "仮想ファイルを削除しました。", "success");
  } else {
    swal("キャンセル", "仮想ファイルは安全です :)", "error");
  }
});

• カスタムアイコンの表示

swal({
  title: "スウィート！",
  text: "カスタム画像の表示",
  imageUrl: "images/thumbs-up.jpg"
});

• HTML形式のメッセージ

swal({
  title: "HTML <small>タイトル</small>！",
  text: "カスタム <span style="color:#F8BB86">HTML</span> メッセージ。",
  html: true
});

• 自動クローズタイマ付きポップアップ

swal({
  title: "2秒後に閉じます",
  text: "2秒後にこのポップアップが閉じます。",
  timer: 2000,
  showConfirmButton: false
});

• 入力フォームのカスタマイズ

swal({
  title: "入力フォーム",
  text: "興味深い内容を入力してください:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "入力してください"
},
function(inputValue){
  if (inputValue === false) return false;
  
  if (inputValue === "") {
    swal.showInputError("入力必須です！");
    return false
  }
  
  swal("入力完了！", "入力内容: " + inputValue, "success");
});

• AJAXリクエストの実行

swal({
  title: "AJAXリクエスト例",
  text: "実行してAJAXリクエストを送信",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("AJAXリクエスト完了！");
  }, 2000);
});

• CSSテーマのカスタマイズ

<link rel="stylesheet" type="text/css"href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css"href="themes/twitter.css">

インストール手順

1. 必要なファイルを読み込む

<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

2. ページ読み込み後の初期化処理

swal({
  title: "エラー発生！",
  text: "エラーメッセージを表示中",
  type: "error",
  confirmButtonText: "了解"
});

設定パラメータ

メソッド一覧

実装例

<script>
    $(document).ready(function () {
        // 削除処理
        $(document).on('click', '[id=ApiManagement_del]', function () {
            var resourceId = $(this).attr('rel');

            swal({
                title: "この操作を実行しますか？",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "実行",
                closeOnConfirm: false
            }, function () {

                $.ajax({
                    url: "{:U('App_admin/ApiManagement/del')}",
                    data: {
                        api_id: resourceId
                    },
                    type: 'post',
                    cache: false,
                    success: function (response) {
                        if (response.code === 1) {
                            swal("削除完了！", "", "success");
                            $('.confirm').on('click', function () {   
                                location.reload();
                            });

                        } else {
                            swal("削除失敗！", "", "error");
                            $('.confirm').on('click', function () {   
                                location.reload();
                            });
                        }
                    }
                });
            });
        });
    });
</script>