iziToast

JavaScript

エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

iziToastは、エレガントでレスポンシブに対応した軽量のトーストを実装することができる通知プラグインです。jQueryなどへの依存性がないのも特徴の1つです。お洒落なトーストを実装したい人は要チェックです。

iziToast

デモ

EXAMPLESには、Info、Success、Warning、Error、Question、Custom I、Custom IIの7種類のサンプルが用意されています。

各サンプルをクリックすると、それに対応したトーストが表示されます。スライド、バウンス、フリップなど、どのアニメーションもさりげない動作でとてもエレガントな印象です。

デザインもシンプルで見やすく、レスポンシブにも対応しているのでPCでの閲覧はもちろん、スマホからでも最適なレイアウトで閲覧することができます。

また、使い方が簡単なところもうれしいポイントの1つです。セッティングできるオプション項目の数もかなり豊富なので、カスタマイズ性にも優れています。

タイトルやメッセージのカラーやサイズ、背景カラーやテーマの指定など、さまざまな設定がオプションから行えます。

ちなみに、themeにはlightかdarkを、colorにはblue、red、green、yellowの値を指定することができるほか、positionにはbottomRight、bottomLeft、topRight、topLeft、topCenter、bottomCenter、centerという値が用意されています。positionのデフォルト値はbottomRightになります。

このほか、icon、iconText、iconColor、image、imageWidth、maxWidth、zindex、layout、balloon、close、closeOnEscape、rtl、target、targetFirst、toastOnce、timeout、animateInsideなど、まだまだたくさんのオプションがあるので、気になる人はぜひチェックしてみてください。

iziToast

jsPanel高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」前のページ

モバイルライクなナビゲーションメニューを実装できる「Slinky」次のページSlinky

関連記事

  1. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  2. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  3. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  4. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  5. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  6. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP