Jquery Toast Pluginを使ったWebでのトースト表示

トースト

トーストは、スマートフォンなどでよく見られる、ユーザに一時的な通知を表示するためのポップアップです。たいていのトーストは画面の上部や下部に表示され、一定時間が経過するとフェードアウトします。今回はそのトーストをWebで実現するプラグイン「Jquery Toast Plugin」を使ってみました。

GitHub – Jquery Toast Plugin

上記からZIPをダウンロードして解凍した後、distフォルダ以下のMinifyされたCSSとjavascriptファイルを読み込めば準備完了です(jQueryも必須です)。

このプラグインはデモページが見やすくて簡単にデモを表示できて、さらにコードのジェネレーターまで付いていたりと、非常に親切です。使い方も簡単です。

HTML

今回はリンクをクリックするとトーストを表示するようにします。

シンプルなToast

jQuery

jQueryを使ったコードは以下のとおりです。

オーソドックスとはいえ、トーストの上部にプログレスバーが出たり、何度もクリックすると5個まで同時にトーストが現れたりします。基本的なコードの書き方はたったこれだけ、以上で終わりです。後はオプションを変えることでさまざまなトーストを表現できるようになります。デモページにコードのジェネレーターがあるので、ここでちょっとだけサンプルを載せるよりかはデモページで確かめてもらった方がいいと思うので、ここではオプションを簡単に説明します。

オプション

オプション名 説明
text 文字列、配列 本文。HTMLも書けるし、配列を入れるとリスト表示されます。※デモのジェネレーターに配列入れたらただのテキストになってしまいました。scriptタグ内に書けばちゃんとリスト表示されます。
heading 文字列 ヘッダ。HTMLも書ける。scriptタグ内でも配列はただの文字列になります。
showHideTransition fade,slide,plain ポップアップ時のアニメーション。fade…フェードイン(デフォルト)、slide…スライドイン、plain…斜めに広がる感じの動き
allowToastClose true/false 閉じるボタン有無。デフォルトはtrue。
hideAfter 数値/false 時間経過でトーストを非表示にする場合は時間を数値(ms)で設定。非表示にしない場合はfalse。デフォルトは3000(ms)。
stack 数値/false 同時に表示する最大数。最大1つしか出さない場合はfalse。デフォルトは5。
position bottom-left/bottom-right/top-left/top-right/top-center/bottom-center/mid-center/custom※ トーストの表示位置。※customはそういう値ではなく「{ left : ‘auto’, right : ‘auto’, top : ‘auto’, bottom : ‘auto’ }」のように書く。CSSのleftなどと同様にpxや%指定も可。デフォルトはbottom-left。
icon warning/success/error/info/false エラーや警告のアイコン表示の指定。falseはアイコンなし。デフォルトはfalse。
bgColor 色/false トーストの背景色。falseはおそらくプラグインのCSSで定義している色。デフォルトはfalse。
textColor テキストの色。falseはおそらくプラグインのCSSで定義している色。デフォルトはfalse。
textAlign left/right/center テキスト寄せ。ヘッダと本文ともに適用。デフォルトはleft。
loader true/false プログレスバー有無。デフォルトはtrue。
loaderBg 色/false プログレスバーの色。falseはおそらくプラグインのCSSで定義している色。デフォルトは#9ec600。
beforeShow 関数 トースト表示前に実行される関数の定義。
afterShown 関数 トースト表示後に実行される関数の定義。
beforeHide 関数 トースト非表示前に実行される関数の定義。
afterHidden 関数 トースト非表示後に実行される関数の定義。

結構いろいろな表現ができるのでいいかもしれませんね。



広告
  • LINEで送る