項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化されたウィジェットは縦、横に密着して設置されて、全体の四隅が丸く表示されます。

縦に並べてグループ化するには、ウィジェットを囲む<fieldset>にdata-role="controlgroup"を追加し、このとき、ウィジェットの表示はグループ化された全てのウィジェットの横幅がほぼ画面いっぱいに広がります。また、選択された値に対応する文字列がこの幅より長いときは、表示しきれないところが"..."となります。

横に並べてグループ化するには、ウィジェットを囲む<fieldset>にdata-type="horizontal"を追加し、このとき同じグループのウィジェットを一列に並べた長さが画面の横幅より短いときは、ウィジェットが改行されて表示されます。

テーマの設定

ウィジェットのテーマは２種類あって、それぞれを設定するための属性があります。

・ウィジェット本体には「data-theme」属性
・オーバーレイ(ダイアログの背景)には「data-overlay-theme」属性

ウィジェット本体のデフォルトの設定は、ウィジェットが配置されている領域んものに従います。オーバーレイとはダイアログの背景の事で、デフォルトのテーマは"a"です。サンプルコードでは、「ご希望の弁当は？」の箇所で設定しています。

ラベルの左側に表示する

<label>～</label>は、デフォルトではウィジェットの上に表示されますが、<fieldset>などに「data-role="fieldcontain"」をの設定を追加すると文字列がウィジェットの左側に追加sれます、ただ、画面の幅が狭いと、この設定があったとしてもラベルがウィジェットの上に表示されます。さらに、<select>に「data-inline="true"」を合わせて追加すると、ウィジェットの幅が短くなって画面に配置しやすくなります。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 項目選択とトグルスイッチ</title>
	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<section id="page" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">
		<fieldset data-role="controlgroup">
			<legend>弁当の宅配</legend>
			<label for="bento">弁当名</label>
			<select id="bento" name="bento" data-native-menu="false" data-theme="b" data-overlay-theme="b">
				<option>ご希望の弁当は？</option>
				<option>のり弁</option>
				<option>鮭弁</option>
				<option>鳥弁</option>
			</select>
			<label for="num">個数</label>
			<select id="num" name="num" data-native-menu="false">
				<option>個数</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
			</select>

		</fieldset>

		<fieldset data-role="controlgroup" data-type="horizontal">
			<legend>お届け日時</legend>
			<!--
			<label for="year">年</label>			
			<select id="year" name="year" data-native-menu="false">
				<option>年</option>
				<option value="2015">2015</option>
				<option value="2016">2016</option>
			</select>
			-->
			<label for="month">月</label>
			<select id="month" name="month" data-native-menu="false">
				<option>月</option>
				<option>10</option>
				<option>11</option>
				<option>12</option>
			</select>
			<label for="day">日</label>
			<select id="day" name="day" data-native-menu="false">
				<option>日</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
			</select>

			<label for="time">時間</label>
			<select id="time" name="time" data-native-menu="false">
				<option>時間</option>
				<option>10:30</option>
				<option>11:00</option>
				<option>11:30</option>
			</select>
		</fieldset>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile 項目選択とトグルスイッチ</title>

</head>

<body>

</header>

<legend>弁当の宅配</legend>

<option>ご希望の弁当は？</option>

</select>

</select>

</fieldset>

<legend>お届け日時</legend>

<!--

</select>

-->

</select>

</select>

</select>

</fieldset>

</article>

</footer>

</section>

</body>

</html>

アイコンの種類と位置を変更

アイコンの種類はdata-icon、位置はdata-iconposの各属性で変更できます。デフォルトの値は、data-icon="arrow-d"(下向きのアイコン)、data-iconpos="right"(ウィジェットの右端の設置)です。