フォームに吹き出しでヒントを出すjavascript「Hints.js」

フォームでは作成者と入力者の意図が一致しないときがあります。
またユーザビリティの観点からもわかりやすいフォーム制作が求められます。
Hints.jsを挿入するとフォームに吹き出しでヒントを出すことができます。
hints

使用方法
Hints.jsからHints.jsとjavascriptライブラリのmootools完全版?というcomplete.jsをダウンロードします。
これら2つをheadに埋め込みます。
<script type="text/javascript" src="http://yourdomain/complete.js"></script>
>script type="text/javascript" src="http://yourdomain/Hints.js"></script>

フォームの方ではinputなどにclass属性としてhintを吹き出し表示したい内容をtitleに指定します。
最後にスクリプトとして
<script type="text/javascript">
var hints = new Hints();
</script>

を書けば完成です。
またオプションとして吹き出しの種類や吹き出す位置などを変更できます。
サンプルの例
<script type="text/javascript">
var hints = new Hints({
'theme': 'black', //色:White (default)、Silver、Black、Blue、Green
'position': 'bottom'} //位置:above、left、right (default)、bottom
);
</script>

そのほかにも以下があります。
hintLocation:吹き出し対象のタグ、デフォルトtitle
width:吹き出しの幅、デフォルト250px
slideDistance:スライドする距離、デフォルト10、0で非表示
フォームに吹き出しでヒントを出すjavascript「Hints.js」サンプル

sponsors

「フォームに吹き出しでヒントを出すjavascript「Hints.js」」をシェアする

記事作成:
記事URL:

TOP > > > フォームに吹き出しでヒントを出すjavascript「Hints.js」