« CSS3での表示を確認するツール | トップページ | 気持ちよくアニメーションするCSS3のナビ »

2010年11月 1日 (月)

フォーカスするとラベルがスライドして表示されるjQuery

前々回のフォームのパネル項目をスライドさせるjQueryの続きでフォーム関連のjQueryとなります。

今回はフォーカスする事でラベル内に表示されたテキストを移動させる「Sliding Labels」。

デモページはこちらとなります。

スクリプトファイルjquery.slidinglabels.js内のオプションで設定します。

className:'form-slider',
topPosition : '5px',
leftPosition : '5px',
axis : 'x',
speed : 'fast'

className クラスネームを指定できます。
topPosition leftPosition それぞれラベルの左上を基準として指定したピクセル分距離を離して表示させます。
axis 指定できる項目は「x」もしくは「y」文字を移動させる場合x方向に移動させるかy方向に移動させるか設定できます。
speed 指定できる項目は「fast」もしくは「slow」となります。移動させる時のスピードを指定できます。

|

« CSS3での表示を確認するツール | トップページ | 気持ちよくアニメーションするCSS3のナビ »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/37385303

この記事へのトラックバック一覧です: フォーカスするとラベルがスライドして表示されるjQuery:

« CSS3での表示を確認するツール | トップページ | 気持ちよくアニメーションするCSS3のナビ »