はじめに
第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフォーム入力に注目し、Input Hint Overlay、Text input field filter、jQuery Validation、Simplest Twitter-like dynamic character count、jQuery-narrative-selectについて取り上げます。
jQuery本体は標準で機能追加する手段が備わっています。「プラグイン」という拡張スクリプトを作成すると、アニメーション効果やフォーム操作補助、メディアの操作など取り扱うことができます。jQuery Plugin公式サイトでは、1,000を超えるプラグインが公開されています。
対象読者
- jQueryプラグインに興味があり、使ってみたい方
必要な環境と準備
jQueryのダウンロード
執筆時点のjQueryの最新版は、1.4.2です。第1回を参考に、ダウンロードしてください。
jQuery Pluginの使い方
jQuery Pluginの基本的な使い方は以下の通りです。
- 使いたいプラグインをダウンロードする
- jQueryとプラグインを読み込む
- プラグインの実行
プラグインによって利用方法が異なるので、配布元の説明やサンプルコードを参考にしてください。
入力ヒントを表示するInput Hint Overlay
Input Hint Overlayは、入力補助となる説明文を表示できるプラグインです。プラグインは、こちらからダウンロードします。
InputHintOverlayは、フォーム要素からの表示位置をピクセル単位で指定できます。例えば、$(form).inputHintOverlay(5,3)のように指定すると、要素から下に5px、右に3pxの位置に説明文を表示できます。
リスト1にInput Hint Overlayプラグインの使用例を示します。ここでは、氏名、電話番号、血液型を入力する単純なフォームを用意し、各項目に説明文を表示させています。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>inputHintOverlayサンプル</title>
//1. jQueryの読み込み
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
//2. inputHintOverlayプラグインの読み込み
<script type="text/javascript" src="js/jquery.inputHintOverlay.js"></script>
<script type="text/javascript">
<!--
//3. inputHintOverlayプラグインの実行
$(function () {
$('form#testForm').inputHintOverlay(5, 3);
});
//-->
</script>
//4. 説明文のスタイルを指定
<style type="text/css">
.inputHintOverlay { color: #999; font-size: 14px; }
</style>
</head>
<body>
<h1 id="title">inputHintOverlayサンプル</h1>
<form id="textForm" action="">
<fieldset>
氏名：<input type="text" id="name" title="氏名を入力してください。" size="30" />
電話番号：<input type="text" id="phone" title="電話番号を入力してください。" size="30" />
血液型：<input type="text" id="bloodtype" title="血液型を入力してください。" size="30" />
<input type="button" id="submit" value="登録" />
</fieldset>
</form>
</body>
</html>
1、2のようにjQueryとプラグインを読み込み、3でプラグインを実行しています。表示させたい説明文のスタイルを4で指定しています。リスト1の実行結果を図1に示します。
このプラグインを利用すると、項目ごとに何を入力すればよいかあらかじめユーザに示すことができ、入力時の利便性が高まります。
