Bar Indicator

JavaScript

数値をインジケーターで見やすく表示できる「Bar Indicator」

Bar Indicatorは数値をインジケーターで表示させることができるjQueryプラグインです。視覚的にどのくらいの数値なのかが瞬時に分かるのでとても便利ですね。シンプルなデザインで見やすいと思います。

Bar Indicator

デモ

特徴としては、オプションで様々なスタイルのバーにすることができることです。

横表示や縦表示はもちろん、バーの高さ、カラー、タイトル付けなどなどカスタマイズする上でも非常に役立つ機能がいろいろと用意されています。

バーの始点と終点に最小値・最大値を表示させたり、なんてことも可能です。

基本的な使い方は、jQuery本体とプラグインファイルを読み込んだ状態で、以下のようにHTMLを記述します。

<span id="bar">30</span>

あとはBar Indicatorを初期化してあげればOKです。

$('#bar').barIndicator();

シンプルな数値のバー表示から、ちょっとした複雑なカスタマイズを施したバーまで、応用次第でいろんなバリエーションが可能になるので、この手のプラグインを探している方には有力な選択肢の一つになりそうですね。

Bar Indicator

Sliiideシンプルなスライディングメニューを実装できる「Sliiide」前のページ

MacのAirmail 2で未読メールを先頭に表示させる方法次のページ

関連記事

  1. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  2. funnyText.js
  3. Woco Accordion jQuery plugin
  4. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  5. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  6. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP