【jQuery】notifIt!を使ってフローティングウインドウを表示させる
フローティングウインドウを簡単に実装できるサンプルを紹介したいと思います。
もっとカッコイイデザインで表示させたい!と思った方は、モーダルダイアログの記事も参考にしてくださいね。
zen6a.hateblo.jp
notifIt!のダウンロード先
http://naoxink.hol.es/notifIt/
Step 2 - Download it!の「Now!」ボタンを押すとダウンロードできます。
使用用途
- ajaxで取得結果を表示させたいとき。
- データの更新や削除したときに、画面遷移せず、結果を表示させたいとき。
サンプル1(とりあえず、動作確認を見たい場合
<html> <head> <title>notifIt!</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./notifIt/css/notifIt.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./notifIt/js/notifIt.min.js"></script> </head> <body> <script> notif({ msg: "<b>Success:</b> <br />In 5 seconds i'll be gone", type: "success", multiline: true });[f:id:zen6a:20170731005233p:plain] </script> </body> </html>
下記のフローティングウインドウが表示されれば成功です。
notifIt!のオプション説明
引数 | 設定値 | 説明 |
---|---|---|
msg | 自由入力 | フローティングウインドウに表示させるテキスト |
position | center left right |
フローティングウインドウの位置 |
type | success info warning error |
フローティングウインドウの背景色 |
bgcolor | カラーコード 例(黒色を指定):#000000 |
フローティングウインドウの背景色 |
color | カラーコード 例(黒色を指定):#000000 |
テキストの色指定 |
opacity | 数値を入力 例:0.8 |
透明度設定 |
timeout | 数値を入力 例(1秒表示):1000 |
フローティングウインドウの表示時間 |
autohide | true(初期値) false |
自動でフローティングウインドウが消えないようにする |
multiline | true false(初期値) |
テキストを改行させる |
clickable | true | ボタンを押したときにフローティングウインドウが閉じる |
ajaxと組み合わせた使い方
<?php /* * notifIt! * https://github.com/naoxink/notifIt/archive/master.zip * Demo * http://naoxink.hol.es/notifIt/ */ ?> <!DOCTYPE html> <html> <head> <title>notifIt!</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./notifIt/css/notifIt.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./notifIt/js/notifIt.min.js"></script> </head> <body> <script> $.ajax({ type: "POST", dataType:"text", url:"http://......", data: { "text":"aaa" }, success: function(res) { notif({ msg: "<b>Success:</b>", type: "success", multiline: true }); }, error: function(res) { notif({ msg: "<b>error:</b>", type: "error", multiline: true }); } }); </script> </body> </html>