Sliding Labels


Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対応しています。
Sample: demo
Tutorial: Sliding Labels Official Plugin Release
License: -

Note

<script src="js/jquery.slidinglabels.min.js"></script>
<script>
$(function(){

	$('#contact-form').slidinglabels({

		/* these are all optional */
        className    : 'slider', // the class you're wrapping the label & input with -> default = slider
		topPosition  : '5px',  // how far down you want each label to start
		leftPosition : '5px',  // how far left you want each label to start
		axis         : 'x',    // can take 'x' or 'y' for slide direction
		speed        : 'fast'  // can take 'fast', 'slow', or a numeric value

	});

});
</script> 

これだけでOKみたいです。
マークアップは普通に

<form id="contact-form"> 

<ul>
	<li class="slider">
		<label for="name">name</label>
		<input type="text" id="name" name="name">
	</li>
	<li class="slider">
		<label for="url">url</label>
		<input type="text" id="url" name="url">
	</li>
	<li class="slider">
		<label for="email">email</label>
		<input type="text" id="email" name="email">
	</li>
</ul> 

<button type="submit">Submit</button> 

</form> 

Related snippet :

  • Description: セレクトボックスを選択するとそれに応じたテキストボックスを出すスニペット。必要になって作りました。ずらーっと並んでいるより、こうして項目に応じてだし ...
  • Description: シンプルなモーダルウィンドウです。jQueryUIとThickbox Varietiesを併用するタイプで、クロスブラウザで動作します。使いどころは ...
  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: 背景に指定した画像をギャラリーにするプラグインです。IE6でも問題無し。背景指定なので、スライドショーの上に画像やテキストを自由に配置することも可能 ...
  • Description: シンプルで多彩なスライダー。画像周りに無駄な装飾がないので既存のデザインにしっくり納められる汎用性がありますね。クロスブラウザで動作してくれます。m ...
  • Description: Facebookのように、インスタンスサーチから選択後にタグ化出来るプラグインです。大量の選択肢がある場合は、ドロップダウンや入力方式であることが殆 ...
  • Description: タブをクリックするとスライドしながら出現するコンタクトフォームを実装出来ます。フィードバック用にもいいですね。 Sample: demo ...