• かちびと.net

    jQueryを使ってコメント数などをバーの長さに置き換えて数値の差を可視化するTips。軽量なコードで実装できますので覚えておくといいですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services