jquery toast pluginを使い方を記載してみました。
jquery toast plugin
jqueryを使うときに、簡単にトースト表示が導入できるプラグインです。
読み込んで、１行書くだけでトーストが表示されます。
公式のgithubはこちらです。
公式のドキュメントはこちらです。
導入する
インストール
githubのこちらから、cloneするかzip形式でダウンロードします。
落としてきたら、distの中の下記ファイルを読み込んで使いましょう。
jquery.toast.min.js
jquery.toast.min.css
cdn
cdnjsに置いてあるので読み込んで使います。
css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css" integrity="sha512-wJgJNTBBkLit7ymC6vvzM1EcSWeM9mmOu+1USHaRBbHkm6W9EgM0HY27+UtUaprntaYQJF75rc8gjxllKs5OIQ==" crossorigin="anonymous" />
javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js" integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw==" crossorigin="anonymous"></script>
使ってみる
メッセージのみ表示
普通にトースト表示するだけだと、下記の1行でOKです。
$.toast("codelike test toast!!😃");
See the Pen
[jquery]jquery toast plugin1 by yasuaki (@include777)
on CodePen.
オプションを指定して表示
指定できるオプションを全て指定してみました。
どんなオプションが指定できるかは下記を参照してください。
イベント毎にアラートを出すようにしているので、実行すると４回アラートが表示されます。
See the Pen
[jquery]jquery toast plugin[all options] by yasuaki (@include777)
on CodePen.
指定できるオプション
トーストに指定できるオプションは下記です。
heading
・トーストのヘッダー文字指定
icon
・トーストの左側にアイコンを表示する(種類；warning, success,error,information)
showHideTransition
・トーストの表示アニメーションを指定する(種類：fade, slide, plain)
allowToastClose
・トーストの閉じるボタンの表示・非表示(trueまたはfalseを指定)
hideAfter
・トーストの表示時間をミリ秒で指定する。falseを指定すると自動で閉じられなくなる。
stack
・表示されるトーストの数を指定する。falseだと、ひとつだけ表示される。
position
・トーストの表示場所を指定する
指定できるトーストの表示場所は下記になります。
bottom-left:左下 / bottom-right:右下 / bottom-center:中央の下 / top-left:左上 / top-right：右上 / top-center：中央の上 / mid-center：中央
textAlign
・トーストに表示されるテキスト位置（left, right, centerのどれか)
loader
・ローダーを表示するかどうか(trueまたはfalseを指定)
loaderBg
・ローダーの色を指定(例：”#0a0a0a”)
トーストのイベント
トーストで発生するイベントは下記です。
beforeShow：function（）{}
トーストが表示される前に呼び出される。
afterShown：function（）{}
トーストが表示された後に呼び出される。
beforeHide：function（）{}
トーストが非表示になる前に呼び出される。（閉じるボタンを押したタイミング）
afterHidden：function（）{}
トーストが非表示になった後に呼び出される。
コメント