[jquery]jquery toast pluginの使い方

javascript

jquery toast pluginを使い方を記載してみました。

jquery toast plugin

jqueryを使うときに、簡単にトースト表示が導入できるプラグインです。
読み込んで、1行書くだけでトーストが表示されます。

公式の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.

オプションを指定して表示

指定できるオプションを全て指定してみました。
どんなオプションが指定できるかは下記を参照してください。

イベント毎にアラートを出すようにしているので、実行すると4回アラートが表示されます。

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(){}
トーストが非表示になった後に呼び出される。

コメント

タイトルとURLをコピーしました