コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

csstest：jQueryプラグイン jquery.toolbar.jsを使って、きれいなツールバー（toolbar）を実装

ツールチップのように表示されるきれいなtoolbarを実装してくれます。表示は横方向、縦方向、上下左右の位置をオプションで変更できます。ギヤーマークのアイコンをクリックすると、toolbarが発動します。アイコンをもう一度クリックすると、toolbarが閉じます。
このプラグインを設置する際は、ファイルの相対位置に注意が必要です。オリジナルのcss、jsファイルの内部に相対パスが書かれているため、「Usage]のとおりの位置に各ファイルを設置すると、うまく動きません。

サンプル

横方向のtoolbarを上に表示

JSソース 
$('#user-toolbar').toolbar({
  content: '#user-toolbar-options',
  position: 'top'
});
HTMLソース 
<div id="user-toolbar-options">
  <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-delete"></i></a>
  <a href="#"><i class="icon-ban"></i></a>
</div>

縦方向のtoolbarを左側に表示

JSソース 
$('#vertical-toolbar').toolbar({
  content: '#user-toolbar-options',
  position: 'left'
});
HTMLソース 
<div id="user-toolbar-options">
  <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-delete"></i></a>
  <a href="#"><i class="icon-ban"></i></a>
</div>

 

 

 

 

 

戻るボタン