Bar Indicator

JavaScript

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

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

Bar Indicator

デモ

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

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

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

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

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

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

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

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

Bar Indicator

関連記事

  1. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  2. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  3. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  4. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  5. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  6. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP