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

｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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」サンプル

2007年08月27日

前の記事：ページめくり風の画像ギャラリーを作成するjavascript「jqShuffle」
次の記事：ニュースティッカーを作成するjavascript「Innerfade with jquery」

関連記事

• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• [mootools]WysEditor
• [mootools]TimeSpinner
• [mootools]Time Picker
• [mootools]FancyUpload

• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」
• レイヤー表示（？）JavaScript「jParallax」