簡単なチュートリアル

Toolbar.js は、非常に実用的な Tooltips スタイルの jQuery ツールバー プラグインです。同様の HTML5 中國も、純粋な JavaScript で書かれた軽量ツールチップ プラグイン html5 tooltipsjs を共有しました。Toolbar.js は非常に使いやすく、Font Awesome フォント アイコンと一緒に使用でき、非常にクールなツールバー ポップアップ アニメーション効果を作成できます。その機(jī)能には次のものも含まれます。

• 使い方は簡単で、いくつかのパラメータを設(shè)定するだけで済みます。
• オプションのツールバー ボタンの組み込みセット。
• ツールバーは、必要な要素に接続できます。
• ツールバーのボタンは、Font Awesome アイコンを使用してカスタマイズできます。
• ツールバーの位置、色、アニメーションをカスタマイズできます。
• ツールバーは応答性が高く、ビューポートがズームされるとボタンの位置に応じて動(dòng)的に変化します。
• CSS3 を使用してツールバーをアニメーション化します。
• すべての最新ブラウザ IE8 以降と互換性があります。

デモを見る プラグインをダウンロードする

使い方it

jQuery ツールバー プラグインを使用するには、jquery、jquery.toolbar.js、および jquery.toolbar.css ファイルをページに導(dǎo)入する必要があります。また、Font Awesome フォントアイコンを使用するには、Font Awesome 関連ファイルを?qū)毪工氡匾ⅳ辘蓼埂?

<link href="css/jquery.toolbar.css" rel="stylesheet" /><script src="js/jquery.min.js"></script><script src="js/jquery.toolbar.js"></script>

HTML 構(gòu)造

ページ內(nèi)の任意の場所でツールバーの HTML 構(gòu)造を定義できます。ただし、覚えておく必要があるのは、ツールバーを非表示にするために非表示のクラスをツールバーに追加することです。

<div id="toolbar-options" class="hidden">   <a href="#"><i class="fa fa-plane"></i></a>   <a href="#"><i class="fa fa-car"></i></a>   <a href="#"><i class="fa fa-bicycle"></i></a></div>

初期化プラグイン

ページの DOM 要素がロードされた後、必要な DOM 要素にツールバーをアタッチできます。例:

$('#element').toolbar( options );

設(shè)定パラメータ

Toolbar.js プラグインでは、次の設(shè)定パラメータを使用できます。

• content: ツールバー コンテンツ コンテナーの ID 番號を指します。

$('#button').toolbar({  content: '#toolbar-options',});

• 位置: ツールバーは要素の上下左右の 4 つの位置に配置できます。このパラメータは位置を設(shè)定するために使用できます。

$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom'});

• スタイル: ツールバーのスタイルを選択します。 CSS ボタンと同じ値を受け取ります。

$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary'});

• アニメーション: このパラメーターは、ツールバーのアニメーション効果を設(shè)定するために使用できます。オプションの CSS アニメーション効果が 5 つあります。詳細(xì)については、デモの例を參照してください。これら 5 つのアニメーションの名前は、標(biāo)準(zhǔn)、反転、成長、フライイン、およびバウンスです。

$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  animation: 'flip'});

• イベント: ツールバーは、マウスのクリックまたはマウスのスライドによってトリガーできます。

$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  event: 'click'});

• HideOnClick: ページ上の他の場所をクリックしたときに、表示されているツールバーを閉じるかどうか。 rugged が false に設(shè)定されているか、設(shè)定されていない場合は、ボタンを再度クリックしてツールバーを閉じる必要があります。

$('#button').toolbar({  content: '#toolbar-options',  position: 'bottom',  style: 'primary',  event: 'click'});

• 調(diào)整: ツールバーの表示位置を調(diào)整するために使用します。正の整數(shù)を受け取ります。このオプションは通常、非標(biāo)準(zhǔn)ボタンでツールバーを使用するときにツールバーの表示位置を微調(diào)整するために使用されます。

$('a').toolbar({  content: '#tool-options',  position: 'top',  adjustment: 35});

注:

ツールバーが表示されている場合、ツールバーをトリガーする要素には .pressed クラスが追加されます。

最初にアイコンに JavaScript スクリプトが必要な場合は、ツールバーを呼び出す前に定義する必要があります。

高度なアプリケーション

data 屬性を使用して、複數(shù)の要素に同じツールバーを使用できます。

<div data-toolbar="user-options"></div>

$('div[data-toolbar="user-options"]').toolbar( options );

button 要素の data 屬性を使用して、ツールバーの個(gè)々のプロパティを構(gòu)成することもできます。

<div   data-toolbar="user-options"   data-toolbar-event="click"   data-toolbar-style="primary">

イベント

.on() メソッドを通じてツールバーで発生するイベントをリッスンできます。

$('#element').on('toolbarShown',   function( event ) {      // this: the element the toolbar is attached to   });

メソッド

ソース: jQuery ホーム