このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.slidinglabels.min.js"></script>
<script>
	$(window).load(function(){
		$('#contactForm').slidinglabels({
			className : 'form-slider',
			topPosition : '5px',
			leftPosition : '5px',
			axis : 'x',
			speed : 'fast'
		});
	});
</script>


//オプション一覧
className : 'form-slider',
topPosition : '5px',
leftPosition : '5px',
axis : 'x',
speed : 'fast'
<form id="contactForm">
	<p class="form-slider">
		<label for="user">名前</label>
		<input type="text" id="user" name="user">
	</p>
	<p class="form-slider">
		<label for="mail">メールアドレス</label>
		<input type="text" id="mail" name="mail">
	</p>
	<p class="form-slider">
		<label for="cotents">内容</label>
		<textarea name="cotents" id="cotents" cols="30" rows="10"></textarea>
	</p>
</form>

SlidingLabelsについて

SlidingLabelsは、入力フォームのラベルに動きをつけるプラグインです。
普通のフォームにアクセントをつけるのに最適です。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • Stepper

    Stepper

    マウス操作で数字をカウントアップ、ダウンで入力させる

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示

  • fancyInput

    fancyInput

    入力フォームの文字入力をユニークな見た目、動作に変更

  • Ranger

    Ranger

    スライダーで値を選択できるUIを簡単に設置できる

  • timepicker

    timepicker

    時間の入力を簡単にしてくれる