Sooey

2010-11-15 23:58:12 +0900

数カ月前にGitHub Jobsがオープンしたときに、Post a job listingのフォームにある必須項目の見せ方が気に入ってしまいました。↓こんなの。

GitHub Jobs - Job posting form | Flickr - Photo Sharing!

ミニマルな感じがして、あちこちで使いたいテクニックだったので、同じような表示が簡単にできるようにjQueryプラグインを作りました。

動作としては、INPUT要素やTEXTAREA要素のclass属性値にrequiredを指定して以下のコードを実行すると、値の入力に応じてclass属性にvalidという値が設定されたりされなかったり、というもの。

$(function() {
  $('input, textarea').requiredStar();
});

正直なところ、キモはJavaScriptじゃなくて背景の画像のような気がしています(もちろんGitHubのやつとは別の画像を用意しました)。例によってInternet Explorerではまったく動作確認をしていませんが、たぶんIE8あたりなら動くんじゃないでしょうか。

動作デモはjQuery Required Star Plugin Demoに。