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

iziToastのモーダルウィンドウ版はこちら
[iziModalで超簡単にモーダルウィンドウを作成 - Qiita](https://qiita.com/wyokobe/items/27feead7ebd4314dfae1)

## 0.はじめに

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

[ApacheLicense2.0](https://github.com/dolce/iziToast/blob/master/LICENSE)で商用利用可ですし（重要）

## 1.作り方

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

[iziToast](http://izitoast.marcelodolza.com/)

<img width="748" alt="スクリーンショット 2018-04-22 17.03.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/187135/99a0c699-198e-0202-ea76-52f162daf347.png">

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

[jQuery](https://jquery.com/)
[GitHub - jquery/jquery-migrate: APIs and features removed from jQuery core](https://github.com/jquery/jquery-migrate)

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

``` bash
.
├── 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をこのような感じで作成します。

```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>
```

<img width="314" alt="スクリーンショット 2018-04-22 17.04.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/187135/5812c820-e5cc-64cd-bae4-71192ded0ea8.png">


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

[sample](https://wyokobe.github.io/iziToast-demo/01.html)

## 2.応用

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

```html
<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](https://wyokobe.github.io/iziToast-demo/02.html)

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

```html
<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](https://wyokobe.github.io/iziToast-demo/03.html)

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

```html
<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](https://wyokobe.github.io/iziToast-demo/04.html)