2014/10/21

【JavaScript】alertウインドウをオシャレに表現!!『SweetAlert』の使い方

【JavaScript】alertウインドウをオシャレに表現!!『SweetAlert』の使い方

ブラウザ準拠の素っ気ないデザインのalertウインドウをオシャレなデザインのウインドウに変更できるライブラリ『SweetAlert』を使い方とともに紹介します.

目次

入手・読込方法

http://tristanedwards.me/sweetalertにアクセスし,ページ中盤辺りにある「Download files」をクリックします.

次に,ダウンロードしたファイルを解凍します.
解凍したファイルのlibフォルダ内の以下の2つを読み込みます.

<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">
<script src="lib/sweet-alert.min.js"></script>

使用方法

ウインドウ読み込み時や,要素のクリック時などのイベントリスナーに処理を追加して使用するのが一般的かと思います.

要素をクリックした場合の処理では,以下の様な記述になります.

document.getElementById("hoge").addEventListener("click", function() {
  //ここにSweetAlertを表示する処理を記述
}, false);

では,SweetAlertを表示する処理を紹介します.

swal({
    // モーダル上に表示するタイトル(default:null)
    title : "",
    // モーダル上に表示するテキスト文(default:null)
    text : "",
    // モーダルのタイプ(warning,error,success,info)(default:null)
    type : "warning",
    // モーダル外側クリックでのウインドウ消去(default:false)
    allowOutsideClick : "",
    // キャンセルボタンの表示(default:false)
    showCancelButton : "",
    // 確認ボタンのテキスト設定(default:"OK")
    confirmButtonText : "",
    // 確認ボタンの色設定(16進数値)(default:"#AEDEF4")
    confirmButtonColor : "",
    // キャンセルボタンのテキスト設定(default:"Cancel")
    cancelButtonText : "",
    // 確認ボタン押下でウインドウを閉じるかどうかの設定(default:true)
    closeOnConfirm : "",
    // キャンセルボタン押下でウインドウを閉じるかどうかの設定(default:true)
    closeOnCancel : "",
    // 画像を使用する場合のパス(default:null)
    imageUrl : "",
    // 画像を使用する場合のサイズ設定(高さx幅)(default:"80x80")
    imageSize : ""
});

以上のようになっています.

サンプル

オプションを指定したサンプルは,ファイルをダウンロードしたhttp://tristanedwards.me/sweetalertのページにあります.

まとめ

確認用のダイアログなど,これまではalertを使いづらかった場面に導入してはいかがでしょうか.

オシャレかつカンタンなので是非検討してみてください!