モバイルアプリを使用したことがある人は誰でも、Toast通知に精通していると思います。 はい、これらはまさに予期しないポップアップメッセージであり、携帯電話のタスクに情熱を注いでいるときに注目を集めます。
ネットワークには、AndroidでToast通知を行う方法に関する既製のソリューションが何千もあります。 しかし、悲しいかな、Webブラウザ向けの既成のシンプルなソリューションは見つかりませんでした。 最初の考えは、いくつかのBOXプラグインを取り、それを適応させることでした。 ただし、このようなプラグインは明らかにToast通知の動作をモデル化できません。
これを念頭に置いて、ブラウザーでToast通知をシミュレートする小さなJSライブラリが作成されました。 誰かがそれを役に立つと思うことを願っています。
Toast通知をページに表示するには、コンテンツに2つだけを含める必要があります。
まず、ライブラリスクリプトを接続します。
<script src="js/toastjs.js"> </script>
第二に、ページの最後、または好きな場所に空のdivを挿入します。
<div id="toastjs"></div>
ライブラリが引き続き機能するのはこの領域です。 もちろん、スクリプト自体にこの領域を生成させることもできます。 しかし、これは余分なコードであり、DOMによる余分な操作です。
それだけです... CSSコードはすでにjava scripteに登録されています。 そして、JQuery ...
Toast通知を呼び出すには、次のような単純な関数を呼び出します。
トースト（ 'tl'、 '通知テキスト'、3）;
3つのラテン文字の最初のパラメーターは、ページ上のToastaの位置を示します。 最初の文字は垂直位置を決定します。T-ページの上部、C-画面の中央、B-ページの下部。 2番目の文字は水平位置を定義します：左、中央、右のL、C、R、およびJの文字。この場合、トーストは画面の幅全体に引き伸ばされます。 3番目の文字は、Toast通知内のテキストの配置を定義します。L、C、R、J。 少なくとも一度テキストをタイプセットした人は、何が何であるかを理解するでしょう。
スクリプトは、画面の表示領域の現在のサイズに基づいてToast通知の位置を決定しますが、通知自体は可能な限り、画面の指定領域に対して中央に配置されます。
Toast通知の場所の文字はラテン文字です。 大きく書くことはできますが、小さく書くことはできます。 誰にとってより便利です。
2番目のパラメーターは、Toast通知のテキストを指定します。 内容の制限は特に導入されていません;希望する人はこのパラメーターにさまざまなhtmlコードを挿入する実験を行うことができます（ところで、写真はバタンと挿入されます）。 確かに、この場合、画面自体のトースト通知の場所の明確さは保証されません。
最初のボリューム「戦争と平和」の内容をトースト通知に挿入しないでください。 最大2行または3行の場合、サイトへの訪問者には、さらに分析する時間がありません。
最後に、3番目のパラメーターは、アニメーション時間を含むToast通知の表示期間を秒単位で示します。 Toast通知の期間は、3秒（より少ない値が指定されている場合、時間は3に等しい）から10秒（さらに指定されている場合、時間は10に等しい）までです。
複数のToast通知を同時に呼び出すことができます。 処理のために、現在画面上にあるすべてのToast通知に共通のタイマーが使用されます。 Toast通知の表示領域が部分的または完全に一致する場合、固有のToastサンドイッチが取得され、最後に呼び出された通知が以前に呼び出された通知の上に配置されます。
誰かがToast通知の外観を気に入らなかった場合は、コードに進んで自分でスタイルを修正してください。
例はここにあります 。
ライブラリ自体はここからダウンロードできます 。