progression.jsを使って、フォームに進捗付きのツールチップを表示する

Progression.jsは、フォームにツールチップで進捗度やプログレスバーを表示させることができるjQueryプラグインです。
IE TesterではIE7でも動きました。素晴らしいです!

Progression.js配布元

MITライセンス

使い方

必要なファイルを読み込む

Progression.js配布元からファイル一式をダウンロードし、以下のファイルを読み込みます。

<link href="progression.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.js"></script>

html

ツールチップを表示させたい要素に data-progression と data-helper を記述します。data-progressionの中身は空でOKです。
data-helperにはヘルプ文言などを記述します。
data-progression 属性が付いているものの進捗がカウントされるので、この場合はラジオボタンにもツールチップは表示されませんが data-progression を記述しています。

<form id="myform">
    <p>
        <label for="name">お名前</label>
        <input data-progression="" type="text" data-helper="お名前を入力してください" name="name" value="" />
    </p>
    <p>
        <label for="email">メールアドレス</label>
        <input data-progression="" type="text" data-helper="全て半角で入力してください" name="email" value="" />
    </p>
    <p data-progression="">性別
        <br />
        <label>
            <input name="gender" type="radio" value="男性" />男性</label>
        <label>
            <input name="gender" type="radio"  value="女性" />女性</label>
    </p>
    <p>
        <label for="comment">コメント</label>
        <textarea data-progression="" name="comment" data-helper="感想をを自由に記入してください"></textarea>
    </p>
    <p>
        <input type="submit" class="button" name="" value="送信する" />
    </p>
</form>

jQuery

オプションでデザインやプログレスバー、文言の有無を変更できます。

$(function () {
    $("#myform").progression({
        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,//プログレスバーの表示
        showHelper: true,//ヘルプ文言の表示
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: '85e2c2',
        progressBarColor: '0eab75',
        tooltipBackgroundColor: '4ed6a8',
        tooltipPadding: '10',
        tooltipAnimate: true
    });
});

RELATED POSTS