LoginSignup
5
8

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-04-22

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

0.はじめに

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

ApacheLicense2.0で商用利用可ですし(重要)

1.作り方

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

iziToast

スクリーンショット 2018-04-22 17.03.02.png

また、これを使用するためには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>

スクリーンショット 2018-04-22 17.04.00.png

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

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

5
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
8