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