ざわざわざわ…

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

  • files
  • js
  • html
<link href="<PATH>/jquery.toolbars.css" rel="stylesheet" />
<link href="<PATH>/bootstrap.icons.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.toolbar.min.js"></script>
<script>
	$(window).load(function(){
		$('#ToolbarBtn').toolbar({content: '#ToolbarDemo01', position: 'top'});
		$('.tool-container a').on('click', function(){
			var _icon = $(this).find('i').attr('class');
			var $mes = $('#ToolbarMessageArea');
			switch(_icon){
				case 'icon-user':
					$mes.html('ユーザーアカウントページにいけそうな気がする');
					break;
				case 'icon-star':
					$mes.html('お気に入りに入りそうな気がする');
					break;
				case 'icon-edit':
					$mes.html('編集できそうな気がする');
					break;
				case 'icon-trash':
					$mes.html('削除できそうな気がする');
					break;
				case 'icon-ban-circle':
					$mes.html('これって何ができそうな気がする?');
					break;
			}
			return false;
		});
	});
</script>
<button class="red" id="ToolbarBtn">クリックでツールバー表示</button>

<div id="ToolbarDemo01">
	<a href="#"><i class="icon-user"></i></a>
	<a href="#"><i class="icon-star"></i></a>
	<a href="#"><i class="icon-edit"></i></a>
	<a href="#"><i class="icon-trash"></i></a>
	<a href="#"><i class="icon-ban-circle"></i></a>
</div>

<div id="ToolbarMessageArea">
	<p>ざわざわざわ…</p>
</div>

Toolbarについて

Toolbarは、コンパクトなツールバーを設置できるプラグインです。
使い方次第でユーザビリティーが向上しそうですね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Macaroon

    Macaroon

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

  • FlightBoard

    FlightBoard

    空港の発着情報ボードのようにパラパラパラと文字を切り替える

  • HoverCaptions

    HoverCaptions

    HoverCaptionsは、Hover時に色々なパターンでキャプションを表示できる

  • PercentageLoader

    PercentageLoader

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

  • champagne

    champagne

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