文字数をカウントするSimplest Twitter-like dynamic character count
次は、Twitterの入力フォームのような、残り文字数をカウントするプラグインの紹介です。プラグインはこちらからダウンロードします。
このプラグインをリスト4のサンプルに追加します。まず、リスト5のように、プラグインスクリプトを追加します。
<script type="text/javascript" src="js/charCount.js"></script>
次に、Formタグの中にメッセージ領域を指定します（リスト6）。
<div>
<label for="message">メッセージを入力してください。</label>
<textarea id="message1" name="message1"></textarea>
</div>
続いて、フォームタグで指定したメッセージ領域のid（#message1）を指定し、character countプラグインを実行します（リスト7）。
$(function () {
$("#testForm").validate();
$("#message1").charCount();
});
図7に実行結果を示します。
select要素の見た目を変えるjQuery Narrative Select Plugin
最後は、select要素の見た目を変えるjQuery Narrative Select Pluginを取り上げます。図8のような誕生日を入力するサイトを考えてみましょう。
生まれた年、月、日を、それぞれドロップダウンリストから選択します（図9）。
ここでjQuery Narrative Select Pluginを使用すると、見た目を変更できます（図10）。
プラグインはこちらからダウンロードします。
gdakram-jquery-narrative-select-v1.0.0-1-gca6f46f.zipファイルを適当なフォルダに解凍し、\gdakram-jquery-narrative-select-ca6f46f\javascripts\jquery.narrativeselect.jsを実行htmlのあるjsフォルダに配置します。
また、実行htmlのあるフォルダに新たにcssフォルダを作成し、gdakram-jquery-narrative-select-ca6f46f\stylesheets\jquery.narrativeselectフォルダ以下にあるファイルを、その直下に配置します。そして、プラグインを追加し（リスト8）、スタイルシートファイルを指定します。
<script type="text/javascript" src="js/jquery.narrativeselect.js"></script> <link rel="stylesheet" href="css/jquery.narrativeselect.css" type="text/css" />
jQuery-narrative-selectプラグインはリスト9のようにselect要素のクラスを指定し、narrativeselectメソッドを使用することで適用できます。
$(function () {
$("select.narrative").narrativeselect();
});
リスト10ではプラグイン適用前のselect要素を指定しています。
<select name="D5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
リスト11では、プラグインを適用するために、select要素にnarrativeクラスを指定しています。
<select class="narrative" name="D2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
まとめ
第3回では、jQueryのユーザーインターフェースを拡張するjQueryプラグインの中から、フォーム入力時に役立つInput Hint Overlay、Text input field filter、jQuery Validation、Simplest Twitter-like dynamic character count、jQuery-narrative-selectを紹介しました。次回も引き続き、Webサイト構築に役立つようなjQueryプラグインとして、メニューや、タブ、画面のスライダーなどを取り上げる予定です。
