フォーム入力の補助に最適!プログレスとヘルプを表示する「Progression.js」

「Progression.js」はフォーム入力時に項目ごとのヘルプと、全項目に対して何パーセント入力を完了したのかプログレスを表示してくれるjQueryプラグインです。

Progression.js

screenshot281

この手のプラグインは既にありますが、このプラグインはDemoのフラットなデザインが目にとまりました。どのように機能するのかご紹介します。まずフォーム画面に行くと、最初に入力してほしい項目に、ヘルプが記されたツールチップが表示されています。例えば「名前を漢字で入力してください」のように使えますね。

screenshot282

 

この項目をクリックするとこのようにプログレスバーが変化し、20%になりました。アニメーションが心地良いです。

screenshot283

 

最後まで入力するとこの通りプログレスバーが100%を指しています。

screenshot284

 

それでは「Progression.js」の実装方法をご紹介します。とても簡単です。まずはjQuery含む外部ファイルを読み込んでください。

<link href='progression.min.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.min.js"></script>

 

HTMLはこのようにマークアップします。

<form id="myform">
  <p>
    <label for="">名前</label>
    <input  data-progression type="text" data-helper="名前を全角で入力してください。" name="name" value="" placeholder="">
  </p>
  <p>
    <label for="">メールアドレス</label>
    <input data-progression type="text" data-helper="パソコン用のメールアドレスを入力してください。" name="email" value="" placeholder="">
  </p>
  <p>
    <label for="">お問い合わせ</label>
    <textarea data-progression name="" data-helper="お問い合わせ内容をご記入ください。"></textarea>
  </p>
  <p>
    <input type="submit" class="button" name="" value="送信" placeholder="">
  </p>
</form>

 

JavaScriptは以下のように実装します。各オプションについては上記リンク先に説明があります。

$(document).ready(function($) {
  $("#myform").progression({
    tooltipWidth: '200',
    tooltipPosition: 'right',
    tooltipOffset: '50',
    showProgressBar: true,
    showHelper: true,
    tooltipFontSize: '14',
    tooltipFontColor: 'fff',
    progressBarBackground: 'fff',
    progressBarColor: '6EA5E1',
    tooltipBackgroundColor:'a2cbfa',
    tooltipPadding: '10',
    tooltipAnimate: true
  });
});

 

するとこのように作ることができました。なかなかいいですね。

screenshot286

 

ユーザビリティを高めるためにこういう機能はぜひ導入したいところです。

 

Home > JavaScript > フォーム入力の補助に最適!プログレスとヘルプを表示する「Progression.js」

Return to page top