• かちびと.net

    jQueryでフォームのlabel要素をinput内に表示し、フォーカスしたらスライド、入力中は非表示にするプラグインのご紹介。ブログのコメント欄なんかにいいかも。

    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でフォームの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

URL :
TRB :

Comments & Trackbacks (3)

  1. hidehide55

    いいですね。
    項目名がわからなくなって、入力後の見直しがしにくくなってしまう、というところが弱点かな。
    少なめの項目で、狭めのエリアでのフォーム向きでしょうか。

    • シロ

      こんにちは。

      あ、確かにそういう弱点がありましたね。気が付きませんでした・・仰るとおり少ない項目で発揮しそうです。

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services