bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」

bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」サンプル システムなどでよく使うことがあるツールバーを、jQueryプラグインを使って簡単に導入しましょう。
Toolbar.js - jQuery plugin to create tooltip style toobarsは、クリックすると表示させられるツールチップタイプのツールバーが作れます。

使用方法 Toolbar.js - jQuery plugin to create tooltip style toobarsからファイルをダウンロード。
<link href="jquery.toolbars.css" rel="stylesheet" />
<link href="bootstrap.icons.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.toolbar.js"></script>
<script type="text/javascript">
$(function () {
$('#id名').toolbar({
content: '#id名2', //表示するコンテンツ
position: 'bottom' //表示位置(top,left,right,bottomがあります)
});
});
</script>

あとはボタンと表示する内容をそれぞれ記述します。
<div style="width:幅;">
<div id="id">クリック</div> //隠していた要素を表示するためのボタン
<div id="id2" style="display: none;"> //表示するコンテンツ
//以下記述例
<a href="#"><i class="icon-user"></i></a>
<a href="#"><i class="icon-star"></i></a>
<a href="#"><i class="icon-edit"></i></a>
</div>
</div>

bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」サンプル

sponsors

「bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」」をシェアする

記事作成:
記事URL:

TOP > > > bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」