Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

フォーム入力に役立つjQueryプラグイン

jQuery UI/プラグインの活用(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/11/25 14:00

ダウンロード Sample.zip (50.7 KB)

 本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。

目次

はじめに

 第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の基本的な使い方は以下の通りです。

  1. 使いたいプラグインをダウンロードする
  2. jQueryとプラグインを読み込む
  3. プラグインの実行

 プラグインによって利用方法が異なるので、配布元の説明やサンプルコードを参考にしてください。

入力ヒントを表示するInput Hint Overlay

 Input Hint Overlayは、入力補助となる説明文を表示できるプラグインです。プラグインは、こちらからダウンロードします。

 InputHintOverlayは、フォーム要素からの表示位置をピクセル単位で指定できます。例えば、$(form).inputHintOverlay(5,3)のように指定すると、要素から下に5px、右に3pxの位置に説明文を表示できます。

 リスト1にInput Hint Overlayプラグインの使用例を示します。ここでは、氏名、電話番号、血液型を入力する単純なフォームを用意し、各項目に説明文を表示させています。

リスト1 Input Hint Overlayプラグインの使用例(jQueryPlugin_inputHintOverlay.html)
<!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>

 12のようにjQueryとプラグインを読み込み、3でプラグインを実行しています。表示させたい説明文のスタイルを4で指定しています。リスト1の実行結果を図1に示します。

図1 Input Hint Overlayの実行結果
図1 Input Hint Overlayの実行結果

 このプラグインを利用すると、項目ごとに何を入力すればよいかあらかじめユーザに示すことができ、入力時の利便性が高まります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト asa(asa)

     <WINGSプロジェクトについて>  有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5