基本的なGUIを使いこなそう(3/5):jQuery Mobileによるスマートフォン用Webサイト作成入門

基本的なGUIを使いこなそう (3/5)

作成:2011-05-25 08:13
更新:2012-03-29 10:18

■チェックボックスとラジオボタン

フォームのGUIの使い方がわかったところで、その他のGUIについても使っていくことにしましょう。まずはチェックボックスとラジオボタンについてです。これらも、フォーム用に用意されているHTMLのタグをそのまま使って作成します。ただし、利用の際にはひとつだけ注意すべき点があります。それは「必ず<label>タグを用意する」という点です。

jQuery Mobileでは、チェックボックスとラジオボタンは<label>タグが必須です。「スマートフォンでは<label>タグを認識しないんじゃ？」と思った人。確かにiPhoneなど<label>タグを認識しませんが、しかしそういうことではないのです。jQuery Mobileでは、チェックボックスやラジオボタンは、<label>タグとセットになって初めて独自のデザインとして表示を行うことができます。

実際の利用例を下のリスト欄に掲載しておきましょう。これを表示すると、ちょっと驚くはずです。ラジオボタンとチェックボックスは、それぞれプッシュボタンの中にチェックボックスやラジオボタンを埋め込んだような独特のスタイルで表示されます。これならスマートフォンでもワンタッチでらくらく操作できますね。

これらを適当に設定して「Click」ボタンをクリックすると、ダイアログが現れ、チェックボックスとラジオボタンの選択状態に応じたメッセージが表示されます。

GUIのタグ部分では、チェックボックスとラジオボタンはそれぞれdata-role="fieldcontain"を指定した<div>タグにまとめられています。そして、各タグごとに<label>が用意されていることがわかります。両者をセットで用意することで、この独特のGUIが構築されます。

では、これらの値を取得するにはどのような処理を行えば良いのでしょうか。まず、ラジオボタンの選択された項目を調べている部分からです。

var radio = $('[name=sex]:checked').val();

ラジオボタンは、同じname属性のものが複数用意されており、その中の１つだけがchecked属性を持っています。この項目を取り出しているのが、$('[name=sex]:checked')という部分です。[name=sex]は、name属性がsexであるものを指定しています。更に:を使い、取り出す項目の条件としてchecked属性を指定しています。これで、チェックされたラジオボタンだけが取り出せます。ラジオボタンの処理を行う際の定型句として、この書き方は覚えておくとよいでしょう。

var check = $('#adult').attr('checked') ? '大人':'未成年';

こちらが、チェックボックスのON/OFF状態に応じて値を変数に設定している部分です。チェックボックスのON／OFF状態は、$('#adult').attr('checked')として調べることができます。「attr」というのは属性の値に関するメソッドで、引数に指定した属性の値を取得します。これがtrueであればチェックはON、falseならばOFFと判断できるわけですね。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Sample</title>
		
	<link rel="stylesheet" 
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

	<script type="text/javascript">
	function doAction(){
		var radio = $('[name=sex]:checked').val();
		var check = $('#adult').attr('checked') ? '大人':'未成年';
		$('#dlog_content').text('あなたは、' + check + 'の' + radio + 'ですね。');
		$.mobile.changePage("#dialog", {transition: "pop"});
	}
	</script>
	</head>
	
	<body>

		<div id="home" data-role="page">
			<div data-role="header">
				<h1>Hello</h1>
			</div>
			<div data-role="content">
				<p>jQuery Mobileサンプル。</p>
				<div data-role="fieldcontain">
					<input type="radio" name="sex" id="male" value="男" checked />
					<label for="male">男性</label>
					<input type="radio" name="sex" id="fimale" value="女" />
					<label for="fimale">女性</label>
				</div>
				<div data-role="fieldcontain">
					<input type="checkbox" name="adult" id="adult" />
					<label for="adult">成人</label>
				</div>
			<input type="button" value="Click" onclick="doAction();" />
			</div>
		</div>
		
		<div id="dialog" data-role="dialog">
			<div data-role="header">
				<h1 id="dlog_title">Message</h1>
			</div>
			<div data-role="content">
				<p id="dlog_content">コンテンツ。</p>
			</div>
		</div>

	</body>
</html>

※関連コンテンツ

<< prev next >>

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る