back
より高度なGUI部品を使おう！ (2/5)
■ローディング中の表示
これは、GUIとは若干違いますが……。jQuery Mobileでは、基本的に「ページを実際に移動して表示が変わる」というようなやり方はとりません。同じページ内に複数のページを用意して切り替えたり、あるいはAjaxを使ってサーバーからデータを受け取って表示を更新したりするのが基本です。
が、Ajaxを利用するような場合、どうしてもデータを受け取るまでタイムラグが生じます。このため、jQuery Mobileには標準で「データのローディング中」を示す表示を行う機能が用意されています。以下のようなものです。
実際の利用例をあげておきましょう。HTMLと同じ場所に「data.txt」というファイルを用意し、これの中身に適当なテキストを書いておきます（ローディング中の実験なので、かなりまとまった量のテキストにしておくとよいでしょう）。
ボタンをおすと、画面に「Loading」という表示が現れ、白い円がくるくると回転します。そしてデータのロードが完了するとローディング中の表示は消え、読み込んだテキストをダイアログに表示します。ここでは、doActionに以下のような処理を用意しています。
このように、時間のかかる処理では、「今、処理中なので待ってください」という表示を用意するのが、ユーザーに優しいGUIといえます。メソッドを１つ呼び出すだけですので、利用は簡単です。ここではAjax通信を使いましたが、別に「こういう時に使う」という決まりもありません。いろいろ使い道は考えられるでしょう。
が、Ajaxを利用するような場合、どうしてもデータを受け取るまでタイムラグが生じます。このため、jQuery Mobileには標準で「データのローディング中」を示す表示を行う機能が用意されています。以下のようなものです。
$.mobile.pageLoading( 真偽値 );引数の真偽値は、「ローディングが完了したか」どうかを示すものです。これがfalseだと、データのローディングが完了していないと考え、画面にロード中を示す表示が現れます。trueにすると、ローディングは完了したと考えロード中の表示は消えます。引数を省略した場合はfalseと見なされ、画面にローディング中の表示が現れます。
実際の利用例をあげておきましょう。HTMLと同じ場所に「data.txt」というファイルを用意し、これの中身に適当なテキストを書いておきます（ローディング中の実験なので、かなりまとまった量のテキストにしておくとよいでしょう）。
ボタンをおすと、画面に「Loading」という表示が現れ、白い円がくるくると回転します。そしてデータのロードが完了するとローディング中の表示は消え、読み込んだテキストをダイアログに表示します。ここでは、doActionに以下のような処理を用意しています。
$.mobile.pageLoading(false);pageLoadingでローディング中の表示をした後、「$.get」というメソッドを呼び出しています。これは、第１引数に指定したURLにAjax通信でアクセスする働きをします。第２引数はnullになっていますが、これは必要な情報を受け渡す場合に連想配列を用意するものです。今回は特に使っていません。そして通信が完了すると、第３引数に指定した関数を呼び出し実行します。
$.get('data.txt',null,callback);
$.mobile.pageLoading(true);これが、通信完了時の処理です。pageLoadingをtrueにして表示を止めてもらい、それから引数として渡されたresultの値を<p id="dlog_content">内に表示します。そして、最後にchangePageでダイアログを呼び出します。
$('#dlog_content').text(result);
$.mobile.changePage("#dialog", "pop", false, true);
このように、時間のかかる処理では、「今、処理中なので待ってください」という表示を用意するのが、ユーザーに優しいGUIといえます。メソッドを１つ呼び出すだけですので、利用は簡単です。ここではAjax通信を使いましたが、別に「こういう時に使う」という決まりもありません。いろいろ使い道は考えられるでしょう。
(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(){
$.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>
| << 前へ | 次へ >> |