jQueryを使ってコメント数などをバーの長さに置き換えて数値の差を可視化する

どこかで使いそうだったのでメモ。
jQueryを使って、数値をバーの長さ
で差が分かるように可視化させる、
という方法。マークアップも凄く簡単
なので覚えておきたいTipsです。
サンプルではコメント数を見やすくする
のに使われているみたいです。

簡単なコードで実装可能ですし、クロスブラウザで動作してくれます。

Comment Count Bars

IT Expert VoiceにあるようなコメントバーをjQueryで実装しよう、というもの。

サンプル

コード

$(function() {
    var maxWidth, maxCount;

    $('#most-commented li').each(function(i) {
        var $this = $(this);
        var thisCount = ~~$this.find('.comment-count').text();

        if ( i == 0 ) {
            maxWidth = $this.width() - 40;
            maxCount = thisCount;
        }

        var thisWidth = (thisCount / maxCount) * maxWidth;

        $this.find('.comment-bar').animate({
            width : thisWidth
        }, 200, 'swing');
    });
});

jQueryと上記コードで動作します。マークアップは以下。

マークアップ

<ul id="most-commented"> 
	<li> 
	<a href="#" rel="bookmark" title="">記事タイトル</a> 
	<span class="comment-bar"><span class="comment-count">53</span></span> 
	</li> 
</ul>

53という数値（comment-count）に応じてバーの長さ（comment-bar）が変わってくれます。シンプルでいいのでは。

WordPressのコメント用のコードもありますのでご覧になってみては如何でしょう。

Comment count bars (github) via:Smashing Magazin