このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.notifyBar.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.notifyBar.js"></script>
<script>
	$(window).load(function(){
		$('#notifyBar #notifyBarDemo01').on('click', function(){
			$.notifyBar({
				html: 'オプションなしだとこれ'
			});
		});
		$('#notifyBar #notifyBarDemo02').on('click', function(){
			$.notifyBar({
				cssClass: 'error',
				html: 'エラーが出ましたよ~'
			});
		});
		$('#notifyBar #notifyBarDemo03').on('click', function(){
			$.notifyBar({
				cssClass: 'success',
				html: 'なんかしらのアクションに成功!'
			});
		});
		$('#notifyBar #notifyBarDemo04').on('click', function(){
			$.notifyBar({
				cssClass: 'warning',
				html: 'なんかうまく動かなかったよ。ワーニングだよ。'
			});
		});
		$('#notifyBar #notifyBarDemo05').on('click', function(){
			$.notifyBar({
				cssClass: 'custom',
				html: 'カスタムもできまっせぃ'
			});
		});
		$('#notifyBar #notifyBarDemo06').on('click', function(){
			$.notifyBar({
				position: 'bottom',
				html: '縁の下の力持ちっす。'
			});
		});
		$('#notifyBar #notifyBarDemo07').on('click', function(){
			$.notifyBar({
				html: 'closeボタンを押さないと消えないよ',
				close: true,
				delay: 10000000,
				closeOnClick: false
			});
		});
	});
</script>
<button class="blue" id="notifyBarDemo01">デフォルト</button>
<button class="blue" id="notifyBarDemo02">エラーでた</button>
<button class="red" id="notifyBarDemo03">なんか成功した</button>
<button class="red" id="notifyBarDemo04">ワーニング</button>
<button class="yellow" id="notifyBarDemo05">どぎついカスタムだって可能</button>
<button class="yellow" id="notifyBarDemo06">上からだけとは限らない</button>
<button class="green" id="notifyBarDemo07">閉じるボタンを?</button>

notifyBarについて

nitifyBarは、ブラウザ上部に色々なメッセージを表示することができるプラグインです。
ユーザビリティーもいいので様々な通知に使えそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • PercentageLoader

    PercentageLoader

    とてもきれいにロード内容をパーセント表示してくれる

  • glassyWorms

    glassyWorms

    背景にミミズをはわせる

  • FaviconNotifier

    FaviconNotifier

    ファビコンに数字を表示したり、変えたりすることができる

  • Toolbar

    Toolbar

    コンパクトなツールバーを設置できる

  • Macaroon

    Macaroon

    クッキーの取得、セット、削除を簡単にできる