今日の人気記事

  1. クリックで開閉するスライド・ナビゲーション「bigSlide」
  2. 入力に応じてテキストエリアの高さを調節「Autosize」
  3. 画像にボーダーアニメーション効果を「Inset Border」
  4. レトロなフリップ時計やカウントダウンタイマーを実装「flipCountDown」
  5. 虫眼鏡のように画像の一部を拡大「Zoomple」

フォームのラベルを入力フィールド内に表示「Super Labels」

スポンサーリンク

フォームのラベルを入力フィールド内に表示するプラグイン「Super Labels」を紹介します。

jQueryプラグイン「Super Labels」

このプラグインを使えば、フォームの label要素を input要素内に表示することができます。

また、input要素をフォーカスすると label要素がアニメ効果でフェードし、入力する際には非表示になるといったかっこいい効果もあるのでおすすめプラグインです。

スポンサーリンク

それではデモページの入力フォームをご覧ください。

「Super Labels」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Super Labels のデモでーす。">
<title>Super Labels - jQueryプラグイン</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<style>
#demo {
  width: 300px;
}
</style>
</head>
<body>
<h1>Super Labels のデモです。</h1>
<div id="demo">
  <form action="" method="POST">
    <ul>
      <li>
        <label for="text-input">お名前</label>
        <input type="text" name="text-input" value="" />
      </li>
      <li>
        <label for="text-input">電話番号</label>
        <input type="text" name="text-input" value="" />
      </li>
      <li>
        <label for="text-input">住所</label>
        <input type="text" name="text-input" value="" />
      </li>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.superLabels.js"></script>
<script>
jQuery(function($) {
  $('#demo form').superLabels({
    duration:500,
    fadeDuration:250,
    labelLeft:5,
    labelTop:5
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)