Toolbar.js - 実用的なツールチップ スタイルの jQuery ツールバー プラグイン_html/css_WEB-ITnose

簡単なチュートリアル

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

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

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

使い方it

jQuery ツールバー プラグインを使用するには、jquery、jquery.toolbar.js、および jquery.toolbar.css ファイルをページに導入する必要があります。また、Font Awesome フォントアイコンを使用するには、Font Awesome 関連ファイルを導入する必要があります。

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

HTML 構造

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

<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 );

設定パラメータ

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

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

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

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

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

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

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

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

$('#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 に設定されているか、設定されていない場合は、ボタンを再度クリックしてツールバーを閉じる必要があります。

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

• 調整: ツールバーの表示位置を調整するために使用します。正の整数を受け取ります。このオプションは通常、非標準ボタンでツールバーを使用するときにツールバーの表示位置を微調整するために使用されます。

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

注:

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

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

高度なアプリケーション

data 属性を使用して、複数の要素に同じツールバーを使用できます。

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

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

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

<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   });

事件	描述
toolbarShown	在工具栏显示的时候触发
toolbarHidden	在工具栏隐藏的时候触发
toolbarItemClick	在工具栏被点击的时候触发

メソッド

方法	参数	描述
getToolbarElement	None	获取包装每一个工具按钮的元素

ソース: jQuery ホーム