新着件数やNEWなど、通知アイコンっぽいものを追加する(jQuery+CSS3)

問題

メールアイコンによくあるアイコンの右下に新着件数やNEW!を表示したい。

解答例

せっかくなので、新着お知らせ部分は画像を使わずにjQueryとCSS3で作ってみる。

jQueryでやることは表示するアイコンの要素を作り、画像に重ねること。
最初のHTMLにはimgタグだけがあることにする。

<img src="img.png" alt="たとえばメールのアイコンなど">

これをJavaScriptでちょっと加工する。

完成予定図は下図。

HTMLで書くとこう。

    <span>
        <img src="img.png" alt="たとえばメールのアイコンなど">
        <span>{数字}</span>
    </span>

この形をjQueryで作ることができれば、後はCSSでposition:abosolteやtop,leftなどで位置調整するだけ。

jQuery部分はこんな風になる。

    $('.対象となる画像').each(function(){
        //表示するカウント数はどこかに仕込んでおくとして
        var count = $(this).attr('count');
        //カウント表示の要素を追加する
        if(count != 0){
            if(count > 99) count = '99+';
            $(this).wrap($('<span>').css({'position':'relative'}))
                .parent().append($('<span>').addClass("circle").html(count));
        }
    });

あとは調整して出来上がったものがこちらです。

DEMO

新着件数やNEWなど、アイコンっぽいものを追加する(CSS3) - デモ