Kinchan's Blog

Mar 19th, 2018 - About JavaScript - Written by

【使い方】 JS Sweet Alert 2

SweetAlert2ロゴ

本日はSweetAlert2というJSライブラリの使い方に関して記載していきたいと思います。

このライブラリはブラウザ準拠の地味なアラートを、デザイン性のあるモノにカスタマイズするライブラリになります。

ブラウザ準拠のアラート

DEMO 1

// HTML
<a class="btn" id="btn01">DEMO 1</a>
// JS
$("#btn01").click(function(){
  alert("ブラウザ準拠のアラート");
});

※この解説ではjQueryを使用しますが、jQueryを使用しなくても、もちろん作動します。

１．導入･設置方法

SweetAlert2は、ライブラリをダウンロードして自分のサイト内にファイルを設置し読み込む方法と、CDNを使用して読み込む方法がありまます。

ライブラリをダウンロードする場合

GitHubにアクセスし、Clone or download の部分をクリックし、Download ZIP を選択してダウンロードします。

ダウンロードしたフォルダの中に、distフォルダがあり、その中に「sweetalert2.min.js」と「sweetalert2.css」があるので、それを自身のサイトに設置し、

<link rel="stylesheet" href="css/sweetalert2.css">
<script src="js/sweetalert2.min.js"></script>

のような形で、使用するページに記述し呼び出してください。

CDNを利用する場合

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

上記の記述を呼び出すページ内に記述してください。

２．使用方法＆デモ

使われる頻度が多そうなサンプルを掲載していきます。
ここでは、クリックによる発火を例にします。

基本のアラート

DEMO 2

$("#btn02").click(function(){
  Swal.fire("基本のアラート");
});

タイトルや文章を入れる

DEMO 3

$("#btn03").click(function(){
  Swal.fire("好きなタイトルを入力", "好きなテキストを入力");
});

フッター入れたり、リンク設定

DEMO 4

$("#btn04").click(function(){
  Swal.fire({
    title: "好きなタイトルを入力",
    text: "好きなテキストを入力",
    footer: '<a href="#">Footer付けたりリンクも設定出来ます</a>',
  });
});

表示位置を変更する

DEMO 5

$("#btn05").click(function(){
  // "top" "center" "bottom"に、[left or right]が選べる 
  // top or bottomのみの記述だと、左右に振れず中央配置になる。
  Swal.fire({
    position:"bottom-right",
    title: "好きなタイトルを入力",
    text: "好きなテキストを入力",
  });
});

アイコンを入れる

DEMO 6

$("#btn06").click(function(){
  // "success" "warning" "error" "info" の４種類のアイコンがある
  Swal.fire({
    type:"success",
    title: "好きなタイトルを入力",
    text: "好きなテキストを入力",
  });
});

キャンセルボタンを出す (confirm形式)

DEMO 7

$("#btn07").click(function(){
  Swal.fire({
    title: '好きなタイトルを入力',
    text: "好きなテキストを入力",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'OK'
  });
});

OKボタン選択後にメッセージを出す

DEMO 8

$("#btn08").click(function(){
  Swal.fire({
    title: '好きなタイトルを入力',
    text: "好きなテキストを入力",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'OK'
  }).then((result) => {
    if (result.value) {
      Swal.fire(
        '自由に入力',
        '自由に入力',
        'success'
        );
    }
  });
});

フォームを設置し、値を取得出来るようにする

DEMO 9

$("#btn09").click(function(){
  Swal.fire({
    title: "好きなタイトルを入力",
    text: "好きなテキストを入力",
    input: "text",
    confirmButtonText: '送信',
    allowOutsideClick: false
  }).then(function(result){
    if (result.value) {
      Swal.fire({
        type: 'success',
        title: '送信は成功しました',
        html: ' 送信内容：' + result.value
      });
    }
  });
});

３．まとめ

その他、アニメーションの設定や表示されてから数秒後に自動でアラートを消す設定なども用意されています。
興味のある方は、公式サイトへ行ってご確認くださいませ。

CDNを使用すれば、とても簡単に導入出来ますので、ブラウザ準拠のアラートに不満のある方は、是非一度お試しくださいませ。

Categories: JavaScript タグ: