jQuery　toast　ウェブページにトースト表示しまくり。

忘備録

 

プラグインなんで

 

https://github.com/kamranahmedse/jquery-toast-plugin/

にアクセス。

zipをクリックしダウンロード。

 

distフォルダ配下に

cssとjsファイルそれぞれ設置。

 

んでー毎度のごとく

<link rel="stylesheet" th:href="@{dist/css/jquery.toast.min.css}">

<script type="text/javascript" th:src="@{dist/js/jquery.toast.min.js}"></script>

をhtmlファイルに追加。

 

タイムリーフで書いてるから、上記の書き方。

 

そうじゃなかったら

これ。

<link rel="stylesheet" href="dist/css/jquery.toast.min.css">

<script type="text/javascript" src="dist/js/jquery.toast.min.js"></script>

 

ついでに

type="text/javascript"は省略可。

 

 

あとは、

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

自分好みにー

 いっぱいカスタマイズできますね。