jsプラグイン「iziToast」で超簡単にトースト(通知バー)を表示

iziToastのモーダルウィンドウ版はこちら
iziModalで超簡単にモーダルウィンドウを作成 - Qiita

0.はじめに

「ねえ、ちょっと通知バー作ってみてよJavaScriptで」
そんなこと言われて「え？」となった経験はありませんか？
「ほら、あのサイト行ったら最初に出てくるでしょ。あんな感じで作ってくれない？」
「は、はあ…」
と行った感じで作り始めるわけですが、
「そもそもJavaScriptよくわからんし、どうすりゃいいんだ…」
となった時に、iziToastを使えばその悩みを解決できるかもしれません。

ApacheLicense2.0で商用利用可ですし（重要）

1.作り方

iziToastを使うことでおしゃれで軽量な通知バーを超簡単に作成することができます。
下記サイトの「Download」から、jsとcssを入手します。

iziToast

また、これを使用するためにはjQueryとjquery-migrateが必要です。
下記サイトからそれぞれjsファイルをダウンロードしてきます。

jQuery
GitHub - jquery/jquery-migrate: APIs and features removed from jQuery core

適当なディレクトリを準備してください。
それぞれのファイルを以下のような構成で配置します。

.
├── css
│   ├── iziToast.css
│   └── iziToast.min.css
├── index.html
└── js
    ├── iziToast.js
    ├── iziToast.min.js
    ├── jquery-3.3.1.js
    ├── jquery-3.3.1.min.js
    ├── jquery-3.3.1.min.map
    ├── jquery-migrate-3.0.1.js
    └── jquery-migrate-3.0.1.min.js

index.htmlをこのような感じで作成します。

<link rel="stylesheet" type="text/css" href="./css/iziToast.css" media="screen" />
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/jquery-migrate-3.0.1.js"></script>
<script type="text/javascript" src="./js/iziToast.js"></script>
<script type="text/javascript">
  $(function() {
    iziToast.show({
      title: 'Hey',
      message: 'What would you like to add?'
    });
  })
</script>

たったこれだけで通知バーを作成することができました。

sample

2.応用

ボタンクリックで通知バーを表示

<script type="text/javascript">
  $(function() {
    $(".trigger").on('click', function(event) {
      event.preventDefault();
      iziToast.show({
        title: 'Hey',
        message: 'What would you like to add?',
      });
    });
  })
</script>

<button class="trigger">show</button>

sample

通知バーのバリエーション

<script type="text/javascript">
  $(function() {
    // info
    iziToast.info({
      title: 'Infoカラー',
      message: 'iziToast.info()'
    });
    // success
    iziToast.success({
      title: 'Successカラー',
      message: 'iziToast.success()'
    });
    // warning
    iziToast.warning({
      title: 'Warningカラー',
      message: 'iziToast.warning()'
    });
    // error
    iziToast.error({
      title: 'Errorカラー',
      message: 'iziToast.error()'
    });
  })
</script>

sample

通知バーの配置と表示方法の変更

<script type="text/javascript">
  $(function() {
    $(".trigger-info").on('click', function(event) {
      event.preventDefault();
      // info
      iziToast.info({
        title: 'Infoカラー',
        message: 'iziToast.info()',
        position: 'bottomLeft',
        transitionIn: 'bounceInRight',
      });
    });
    $(".trigger-success").on('click', function(event) {
      event.preventDefault();
      // success
      iziToast.success({
        title: 'Successカラー',
        message: 'iziToast.success()',
        position: 'bottomRight',
        transitionIn: 'bounceInLeft',
      });
    });
    $(".trigger-warning").on('click', function(event) {
      event.preventDefault();
      // warning
      iziToast.warning({
        title: 'Warningカラー',
        message: 'iziToast.warning()',
        position: 'topLeft',
        transitionIn: 'bounceInRight',
      });
    });
    $(".trigger-error").on('click', function(event) {
      event.preventDefault();
      // error
      iziToast.error({
        title: 'Errorカラー',
        message: 'iziToast.error()',
        position: 'topRight',
        transitionIn: 'bounceInLeft',
      });
    });
  })
</script>

<button class="trigger-info">Info</button>
<button class="trigger-success">Success</button>
<button class="trigger-warning">Warning</button>
<button class="trigger-error">Error</button>

sample