ITエンジニア/デザイナ向けにオープンソースを毎日紹介

マテリアルデザインを行う上でユーザがどういった意図で操作を行っているのかを読み取って、それに合わせて情報を表現するというのが問われています。プレイスホルダーは便利な仕組みですが、入力しはじめた瞬間に元々の文字が消えてしまうので何を入力すれば良かったのか分からなくなってしまうことがあります。

そこでラベルを上に移動させる表現が好まれるようになっています。FlowupLabels.jsはその表現の最新版とも言うべきライブラリとなっています。jQuery対応なので導入は簡単そうです。

FlowupLabels.jsの使い方

読み込むべきファイルはJavaScriptとスタイルシートになります。

<link rel="stylesheet" href="css/jquery.FlowupLabels.css">
<script src="js/jquery.FlowupLabels.js"></script>

使い方としてはformに対して.FlowupLabelsというクラス名をつけていた場合、

$('.FlowupLabels').FlowupLabels({
        feature_onInitLoad: false, 
        class_focused:      'focused',
        class_populated:    'populated' 
});

のように指定します。その他、labelタグには fllabel 、inputタグには flinput というクラスをつけるようです。

そうすると、元々のフォームがこうなっていた時に、

入力しようとフォームをクリックすると、

このようにラベルが小さくなります。
このようにラベルが小さくなります。

実際に試したアニメーションGIFがこれになります。

入力せずに戻るとラベルが大きくなります。

FlowupLabels.jsはIE8以降に対応しており、幅広いブラウザで利用ができます。最近はプレイスホルダーだけでラベルがないフォームも増えていますので、そういったサイトには導入する価値があるのではないでしょうか。

FlowupLabels.jsはjQuery/JavaScript、MIT Licenseのオープンソース・ソフトウェアです。

Demo - flowupLabels.js

ENFOS/FlowupLabels.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2