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>