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

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

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

■ローディング中の表示

これは、GUIとは若干違いますが……。jQuery Mobileでは、基本的に「ページを実際に移動して表示が変わる」というようなやり方はとりません。同じページ内に複数のページを用意して切り替えたり、あるいはAjaxを使ってサーバーからデータを受け取って表示を更新したりするのが基本です。

が、Ajaxを利用するような場合、どうしてもデータを受け取るまでタイムラグが生じます。このため、jQuery Mobileには標準で「データのローディング中」を示す表示を行う機能が用意されています。以下のようなものです。
$.mobile.pageLoading( 真偽値 );
引数の真偽値は、「ローディングが完了したか」どうかを示すものです。これがfalseだと、データのローディングが完了していないと考え、画面にロード中を示す表示が現れます。trueにすると、ローディングは完了したと考えロード中の表示は消えます。引数を省略した場合はfalseと見なされ、画面にローディング中の表示が現れます。

実際の利用例をあげておきましょう。HTMLと同じ場所に「data.txt」というファイルを用意し、これの中身に適当なテキストを書いておきます（ローディング中の実験なので、かなりまとまった量のテキストにしておくとよいでしょう）。

ボタンをおすと、画面に「Loading」という表示が現れ、白い円がくるくると回転します。そしてデータのロードが完了するとローディング中の表示は消え、読み込んだテキストをダイアログに表示します。ここでは、doActionに以下のような処理を用意しています。
$.mobile.pageLoading(false);
$.get('data.txt',null,callback);
pageLoadingでローディング中の表示をした後、「$.get」というメソッドを呼び出しています。これは、第１引数に指定したURLにAjax通信でアクセスする働きをします。第２引数はnullになっていますが、これは必要な情報を受け渡す場合に連想配列を用意するものです。今回は特に使っていません。そして通信が完了すると、第３引数に指定した関数を呼び出し実行します。
$.mobile.pageLoading(true);
$('#dlog_content').text(result);
$.mobile.changePage("#dialog", "pop", false, true);
これが、通信完了時の処理です。pageLoadingをtrueにして表示を止めてもらい、それから引数として渡されたresultの値を<p id="dlog_content">内に表示します。そして、最後にchangePageでダイアログを呼び出します。

このように、時間のかかる処理では、「今、処理中なので待ってください」という表示を用意するのが、ユーザーに優しいGUIといえます。メソッドを１つ呼び出すだけですので、利用は簡単です。ここではAjax通信を使いましたが、別に「こういう時に使う」という決まりもありません。いろいろ使い道は考えられるでしょう。

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

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(){
		$.mobile.pageLoading(false);
		$.get('data.txt',null,callback);
	}
	
	function callback(result){
		$.mobile.pageLoading(true);
		$('#dlog_content').text(result);
		$.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">
				<div>data.txtをロードして表示します。</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サイト作成入門」に戻る