PG WORKS

PHPやLinux(サーバー)などのノウハウや、便利なツールを紹介していきます。

【jQuery】notifIt!を使ってフローティングウインドウを表示させる

jQuery HTML

f:id:zen6a:20170423000920p:plain

フローティングウインドウを簡単に実装できるサンプルを紹介したいと思います。

もっとカッコイイデザインで表示させたい！と思った方は、モーダルダイアログの記事も参考にしてくださいね。
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>

下記のフローティングウインドウが表示されれば成功です。
f:id:zen6a:20170731005233p:plain

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>

notifIt!の使用用途

使う用途としては、ajaxの結果を通知するときに、notifIt!を使います。(短いソースで簡単に呼び出すことができるため。

また、公式ページには、ソースコードをクリックすると、実際のデモが表示されます。
好きなデザインがあれば、そのソースをコピペして、そのまま使うことができます。

notifIt!は、定期的にバージョンアップしているみたいなので、システムに導入する際には、随時確認してみましょう。