jQLabel jQuery Plugin - Create Beautiful Labels

Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。
文字列を<span class="label">好きな文字</span>として囲えば次のように文字修飾できます。



ワードごとに色分けしてテキストを分かりやすくすることができそうです。
コードは次のように書きます。ワードと、その色を連想配列で定義してあげる感じです。

$(".label").jQLabel({"pointer":true,
 "labels":{
    "awesome":"#FF9E00",
    "gmail":"#A65D03",
    "labels":"#A49774"
 }
});

CSSでやっちゃってもいいんだと思いますが、<span class="label"></span> で囲えばよくて、色自体は<span> の中身で決めるので、HTMLを書くときにシンプルに書けそうだし、いちいちclass名を覚えなくていいので、めんどくさくないですね。
別にspanだけでなく a とか p タグも使えるようになっているみたい。



あと、$(elements).jQLabel(); という感じでエレメントを一括してラベル化する使い方もあるそう。
指定したエレメント群を一括してラベリングして目立たせるという使い方も出来ます。

テキストにメリハリを与えて読みやすいテキスト作成に役立ちそうです。

元のコードはかなり小さくて、JavaScript 側でスタイリングを行っているようなところは書き換えて独自スタイルにもできます。

関連エントリ

• 瞬時にタグクラウドが形成できるjQueryプラグイン「Jimpl Tag Cloud」
• iPhoneのロック解除風UIでCAPTCHAするjQueryプラグイン「QapTcha」
• 冬なのでページ内に雪を降らせるjQueryプラグイン「Snowfall」