jQueryでフォームのlabel要素をinput内に表示し、フォーカスしたらスライド、入力中は非表示にする

説明的なタイトルですが・・input要素
の中にlabel要素のテキストを表示させ、
フォーカス時にはアニメーションで右に
スライドし、入力中は非表示にする、と
いうのを実装できるjQueryのプラグイン
です。

lavel要素をプレースホルダにする事で省スペース化できます。

jQuery.superLabels動作デモ

以下動作サンプルです。IE7等でも動きます。

アニメーションエフェクトはeasingプラグインを使用します。というのを分かりやすくする為にやや派手なエフェクトに設定しています。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="jquery.easing.1.3.js"></script>
<script type='text/javascript' src="jquery.superLabels.min.js"></script>

本体とeasingプラグイン、jQuery.superLabelsを読み込みます。

$('form').superLabels({
       opacity:0.2,
       easingOut:'easeInBack',
       labelLeft:10,
       labelTop:7
});

で、あとはセッティングすれば完了です。labelのテキストの配置もこのオプションで設定します。どんなオプションがあるかはプラグイン内の冒頭にデフォルト値が設定されてるのでその辺をご覧下さい。エフェクトはeasingのデモで確認できます。

ブログとかのコメント欄なんかにも良さそうな気がしましたので紹介してみました。でも項目の多いフォームだと鬱陶しいかもですね。

jQuery.superLabels