libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

より高度なGUI部品を使おう！ (1/5)

作成:2011-05-30 09:09
更新:2012-03-29 10:19

■スライダーについて

HTMLにはさまざまなGUIの部品がありますが、実は意外に知られていないものもあります。その１つが、アナログ的に数値を入力するのに使う「スライダー」です。よくパソコンでは用いられますね。取っ手の部分をマウスでドラッグして左右や上下に動かすと数値が変わる、あれです。

あのスライダー、HTMLには用意されていない……と思い込んでいませんか？　確かに、以前は標準で用意されておらず、数値の入力は不便な思いをしたものです。が、HTML5からは<input type="range">というタグとして新たに追加されたのです。

jQuery Mobileでは、このタグをそのまま記述してもいいのですが、例によって<div data-role="fieldcontain">タグを使って、その中に記述したほうがよいでしょう。下のリスト欄に利用例をあげておきます。ページにアクセスすると、画面に上下の小さな矢印が表示されたフィールドと、左右にドラッグして動かせるノブのついたバーが表示されます。これがスライダーです。ここでは、
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
このようにタグを用意しています。<input type="range">タグには、重要な属性が３つ用意されています。以下のものです。
min="最小値”
max="最大値"
value="現在の値"
これらは必須のものと考えたほうが良いでしょう。ここでは、value="0" min="0" max="100"としていますね。これで、０～100までの数値を設定するスライダーが作成できます。

ここでは、ボタンをクリックするとスライダーの値をとり出し、ダイアログページに表示させています。現在値の取得は以下のように行なっています。jQueryの機能を使えば、実に簡単に値を取り出すことができますね。
var value = $('#slider').val();
今までスライダーを使ったことがない人のために、デフォルトの状態ではどのようなGUIが表示されるか確かめておきましょう。<input type="range">タグに、data-role="none"という属性を追加しておくと、HTML5本来の表示になります。jQuery Mobileにより、GUIがかなり変更されていることが確認できるでしょう。

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

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 value = $('#slider').val();
		$('#dlog_content').text('現在の値は、' + value + 'です。');
		$.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="fieldcontain">
				<label for="slider">Input slider:</label>
		 	<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
			</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>
※関連コンテンツ

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