CA Reward

Tech Blog

Tech Blogトップに戻る

jQueryに依存しないトーストを実装できるJavaScriptライブラリ

2017.03.24

  • このエントリーをはてなブックマークに追加
  • Pocket
いいちゃん
いいちゃんエンジニア

こんにちは。開発部の飯野です。
今回はjQueryを使わずにおしゃれなトースト機能を手軽に実装できるJavaScriptライブラリ「iziToast」をご紹介致します。

izitoast-demo デモ:公式サイト

iziToast

iziToastは、トーストを簡単に実装できるJavaScriptライブラリです。
他のライブラリに依存しない作りになっているため、toastrのように導入するにはjQueryも入れなきゃ〜なんてことはなく、導入し易いライブラリとなっています。

ちなみにトーストとは、ノンブロッキングで通知を表示するためのポップアップバーです。 iOSやAndroidでも画面上部からスッとフェードインして、一定時間表示後フェードアウトしていきますね、あれです。

動作環境

All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).

私の環境(Android4.4.2、iOS8~10)では問題無く動作しました。

Install

公式サイトからダウンロード
もしくは yarn(npm) か bower でインストール。

yarn

bower

Usage

CSSとJavascriptを読み込みます

基本の使い方

基本のトーストを表示させるならこれだけで済みます。

Customize

アイコンを変更

CSSを用意してアイコンの表示を変えることも可能です。 wifi-toast

アニメーション

Transitionアニメーションが複数用意されているところもポイント高いですね。

Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.

anim-demo

まとめ

実際に使ってみると、設定できるオプションが豊富で使い勝手の良さを感じました。
ライブラリ非依存でとても手軽に導入できるので、jQueryは導入したくないけど手軽にトースト機能を導入したいなぁと考えてるいる方に最適だと思います。ぜひお試しください。

いいちゃん
いいちゃんエンジニア