SweetAlertを利用してみた

SweetAlertはJavaScriptのアラートをリッチなアラートに置き換えてくれるライブラリです。IE、Safari、Firefox、Chromeなどの主要なブラウザで動作がサポートされています。ここではSweetAlertについて解説していきます。

01: インストール

bash


# 作業ディレクトの作成/移動
$ mkdir JS0504-SweetAlert
$ cd JS0504-SweetAlert

# AOSのインストール
$ npm init
$ npm install sweetalert --save

# サンプルコードを作成する。
$ nano index.html

index.html


<html><head>
  <link rel="stylesheet" href="node_modules/sweetalert/dist/sweetalert.css">
  <script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
  <script>
    // swal("Hello World!");
    swal({title: "Confirm",
      text: "Do you really ant to delete this file?",
        type: "warning", showCancelButton: "true"});
  </script>
</body></html>

02: 動作テスト

ブラウザで作成したindex.htmlにアクセスすることで、確認用のダイアログを表示できる。