SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード 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について説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 第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の実行結果

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
フォーム入力を制限するText input field filter

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト asa(asa)

 <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5514 2010/11/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング