このプラグインの実際の動きを確認したい場合は、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プラグイン

  • lodaButton

    lodaButton

    lodaButtonは、アニメーションアイコン付きのボタンを設置できる

  • Highlighter

    Highlighter

    指定要素のみをハイライト表示

  • champagne

    champagne

    指定要素内の要素をランダムにフェードインしながら表示

  • LivingFade

    LivingFade

    指定要素をランダムにフェードイン、フェードアウト

  • Macaroon

    Macaroon

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