2014/12/17

【jQuery】Webページにトーストを表示させられる『jQuery Toast plugin』の使い方

【jQuery】Webページにトーストを表示させられる『jQuery Toast plugin』の使い方

スマートフォンやタブレット端末等で画面上に状況を一時的に通知したい場合に多く用いられるトーストを,Webページ上でも使用できるjQueryプラグイン 『jQuery Toast plugin』の使い方を紹介します.

目次

入手方法

https://github.com/kamranahmedse/jquery-toast-plugin/にアクセスし, 右側のDownload ZIPをクリックして,ファイルをダウンロードします.

使用方法

ダウンロードしたファイルを解凍し,解凍したファイル内にあるCSSファイルとjsファイルを読み込みます

<link href="jquery.toast.min.css" rel="stylesheet" type="text/css">
<script src="jquery.toast.min.js"></script>

トーストを画面に表示するために,以下の様なオプションを指定しつつ,クリックなどのイベントに紐付けます.

$.toast({ 
  text : "サンプルテキスト", //表示したいテキスト(HTML使用可)
  showHideTransition : 'slide',  // 表示・消去時の演出
  bgColor : 'blue',              // 背景色
  textColor : '#eee',            // 文字色
  allowToastClose : false,       // 閉じるボタンの表示・非表示
  hideAfter : 5000,              // 自動的に消去されるまでの時間(ミリ秒)(falseを指定すると自動消去されない)
  stack : 5,                     // 一度に表示できる数
  textAlign : 'left',            // テキストの配置
  position : 'bottom-left'       // ページ内での表示位置
})

サンプル

サンプルはhttp://kdemos.github.io/jquery-toast-pluginページ内にあります.

トーストのオプションのジェネレータもページ下部にあるので,好きなように変更できます.

まとめ

ちょっとした補足や,alertの代用に使えるほか,様々な用途に利用できると思います.

オプションの指定で背景色・文字色も簡単に変更できるので,ぜひ使ってみてください.