この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
今回はフォームについてです。 jQuery Mobileでは通常のコントロールの見た目ではなくて、モバイル端末に適した見た目がいくつか用意されています。そのうちのいくつかを使って簡単なフォームを作成してみたいと思います。
基本
フォーム作成は通常のhtmlと同様にformタグで括り、その中にフォームの要素を配置していきます。 通常ラベルとフォーム要素をセットで配置すると思いますが、それらのセットをdivまたはfieldsetなどで括り、data-role=“fieldcontain”を指定します。例えば、名前をテキストインプットで配置するなら次の様になります。
<form action="" method="post">
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name" />
</div>
</form>選択要素
単数選択、複数選択の選択形の要素はいくつかの表現が用意されています。男性女性などの2択ならフリップスイッチが使えます。selectタグにdata-role="slider"を指定します。
<div data-role="fieldcontain">
<label for="gender">性別</label>
<select name="gender" id="gender" data-role="slider">
<option value="man">男性</option>
<option value="woman">女性</option>
</select>
</div>複数選択のチェックボックスをリスト風に表示する事が出来ます。
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>お問い合わせ種別</legend>
<input type="checkbox" name="type1" id="type1" value="html" />
<label for="type1">html</label>
<input type="checkbox" name="type2" id="type2" value="JavaScript" />
<label for="type2">JavaScript</label>
<input type="checkbox" name="type3" id="type3" value="css" />
<label for="type3">css</label>
</fieldset>
</div>ボタン
ボタンはtype="button"を指定すれば良いのですが、data-inline="true"で横並びにする事が出来ます。
<input type="button" value="クリア" data-inline="true" id="clearBtn" />
<input type="button" value="送信" data-inline="true" />フォームのクリア
キャンセルボタンにフォームのクリア機能を付けてみます。 テキスト入力はvalueを""で初期化をすれば良いですが、独自の見た目になっている入力要素については、値の初期化を行った後にリフレッシュさせる必要があります。
/* テキスト入力形はvalueに""を設定する */
$("input[type='text']").attr("value", "");
$("textarea").attr("value", "");
/* check boxの場合は、チェックされているものを外して、リフレッシュする */
$("input[type='checkbox']").attr("checked", false).checkboxradio("refresh");
/* フリップスイッチの場合も初期値に戻して、リフレッシュさせる */
var mySlider = $("select#gender");
mySlider[0].selectedIndex = 0;
mySlider.slider("refresh");まとめ
動作は次の様になります。
フォームを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）
今回作ったソースは以下の通りです。(JavaScriptとページ部分のみ)
フォームについては他にもカスタマイズされた見た目があるのでフォームギャラリー - jQuery Mobile 日本語リファレンスのページを参照してみてください。
<script type="text/javascript">
$(function(){
$("#cancelBtn").click(function(){
/* check box */
$("input[type='checkbox']").attr("checked", false).checkboxradio("refresh");
$("input[type='radio']").attr("checked", false).checkboxradio("refresh");
/* slider */
var mySlider = $("select#gender");
mySlider[0].selectedIndex = 0;
mySlider.slider("refresh");
/* text */
$("input[type='text']").attr("value", "");
$("textarea").attr("value", "");
});
});
</script>
<div data-role="page" id="form">
<div data-role="header" data-position="fixed">
<h1>form</h1>
</div>
<div data-role="content">
<h2 id="toc-6">お問い合わせ</h2>
<form action="" method="post">
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name" />
</div>
<div data-role="fieldcontain">
<label for="gender">性別</label>
<select name="gender" id="gender" data-role="slider">
<option value="man">男性</option>
<option value="woman">女性</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>お問い合わせ種別</legend>
<input type="checkbox" name="type1" id="type1" value="html" />
<label for="type1">html</label>
<input type="checkbox" name="type2" id="type2" value="JavaScript" />
<label for="type2">JavaScript</label>
<input type="checkbox" name="type3" id="type3" value="css" />
<label for="type3">css</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="comment">ご自由にどうぞ!!</label>
<textarea id="comment"></textarea>
</div>
<input type="button" value="クリア" data-inline="true" id="clearBtn" />
<input type="button" value="送信" data-inline="true" />
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>form</h4>
</div>
</div>