このプラグインの実際の動きを確認したい場合は、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プラグイン

  • Formly

    Formly

    簡単にフォームにきれいなスタイルを設定することができる

  • ClearableTextField

    ClearableTextField

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

  • Selecter

    Selecter

    セレクトボックスの見た目、使い勝手を向上してくれる

  • Autosize

    Autosize

    テキストエリアの高さを入力内容に応じて動的に伸縮

  • Picker

    Picker

    ラジオボタンやチェックボックスのスタイルをクールにしてくれる