[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better

Post on:2013年11月26日

フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。

デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。

デモのアニメーション

Label Better -GitHub

Label Betterのデモ

デモはChrome, Safari, Firefoxなどのデスクトップとスマフォのブラウザでご覧ください。

サイトのキャプチャ

デモページ

name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。
また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。

Label Betterの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.label_better.js"></script>

Step 2: HTML

まずは、シンプルなものから。
「laberl_better」のclassを付与し、「data-position」でラベルの移動方向を指定します。

<input type="text" class="label_better" data-position="top" placeholder="Username">
<input type="text" class="label_better" data-position="right" placeholder="Email Address">

移動させる際に、テキストを変更することも可能です。「data-new-placeholder」に指定します。

<input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username">
<input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address">

Step 3: JavaScript

jQueryのセレクタでフォームを指定し、各種設定を指定します。

 $("input.label_better").label_better({
    position: "top", // ラベルが移動する方向（top, bottom ,left, right）
    animationTime: 500, // アニメーションのスピード
    easing: "ease-in-out", // エフェクト
    offset: 20 // 移動後のラベルとフォームの間隔
  });

sponsors

top of page

©2024 coliss