jQuery Mobile逆引きリファレンス
jQuery Mobileページでローディング表示をカスタマイズするには？
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
別稿「jQuery Mobileページでハイパーリンクを設置するには？」でも触れたように、jQuery MobileではハイパーリンクはデフォルトでAjax式リンクとなります。そして、Ajax式リンクでは、ページ読み込みに際してローディング表示を表示できます（次の画面）。本稿では、このローディング表示を制御する基本的なテクニックについて解説します。
ローディング表示をカスタマイズする
jQuery Mobileでは、ローディングメッセージを管理するLoaderウィジェット*1の動作パラメーターをカスタマイズすることで、さまざまなローディングメッセージを表示できます。
- *1 Loaderウィジェットは、jQuery Mobile 1.2で追加されました。
例えば以下のコードでは、「loading」というテキストメッセージを伴ったローディング表示にカスタマイズしています。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on('mobileinit', function() {
$.mobile.loader.prototype.options.text = 'loading';
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = 'a';
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<a href="linked.php" class="ui-btn">ローディング</a>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
Loaderウィジェットで利用できる主なパラメーターは、以下の通りです。これらのパラメーターは、mobileinitイベントリスナーで記述します*2。
| パラメーター | 概要 | デフォルト値 |
|---|---|---|
| disabled | ローディング表示を無効にするか | false |
| text | ローディング表示のテキスト | loading |
| textVisible | ローディング表示にテキストを表示するか | false |
| textonly | テキストだけを表示するか | false |
| theme | ローディング表示に適用されるテーマ | （親要素を継承） |
| html | ローディング表示に利用するHTML文字列 | '' |
- *2 mobileinitイベントリスナーはjQuery Mobileの初期化タイミングで呼び出されます。その性質上、「jQueryが読み込まれた後、jQuery Mobileが読み込まれる前」に登録しなければなりません。
デフォルトでは、ローディングアイコン（Spinner）だけが表示されますので、ローディングテキストを表示するには、明示的にtextVisibleパラメーターを「true」に設定してください。
以下は、太字部分のパラメーターを変更した場合のローディング表示です。
ローディング表示そのものを無効にしたい場合には、disabledパラメーターを「true」に設定します。
自作のローディング表示を用意する
htmlパラメーターに任意のHTML文字列を指定することで、独自のローディング表示を実装することもできます（以下のコード）。htmlパラメーターが空文字列（デフォルト）の場合は、標準のローディング表示が利用されます。
|
$(document).on('mobileinit', function() {
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = 'b';
$.mobile.loader.prototype.options.html = '<img src="http://www.wings.msn.to/image/wings.jpg" width="200" /><h3>loading now...</h3></span>';
});
|
ローディング表示をプログラムから操作する
$.mobile.loadingメソッドを利用することで、ローディング表示をJavaScriptコード側から制御することもできます。ボタンクリック時に時間のかかる処理を実行する場合には、Loaderウィジェットを利用することで、エンドユーザーに対して処理中であることを明確にできます。
例えば次のコードは、「ロード中」というメッセージを伴うローディング表示を表示し、任意の処理を行った後に、そのローディング表示を非表示にしている例です。
|
$(document).on('click', '.show-loading', function() {
$.mobile.loading('show', {
text: 'ロード中',
textVisible: true,
textonly: false
});
……任意の処理……
$.mobile.loading('hide');
});
……中略……
<button class="show-loading">処理開始</a>
|
ローディングを表示状態にするには、loadingメソッドに対してshowキーワードを渡します。第2引数には、先ほど触れたような動作パラメーターを指定することもできます。非表示にするには、hideキーワードを渡すだけです。
リンクエラーのメッセージを表示する
Loaderウィジェットではありませんが、「ページ移動時の表示」という意味で、併せて紹介しておきます。リンクエラー時のメッセージをカスタマイズするには、以下のようにします。
|
$(document).on('mobileinit', function() {
$.mobile.pageLoadErrorMessage = "ページが表示できません";
$.mobile.pageLoadErrorMessageTheme = "b";
});
|
pageLoadErrorMessageパラメーターは表示する文字列を、pageLoadErrorMessageThemeパラメーターはエラー表示に適用するテーマを、それぞれ表します。
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
4. jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？
ヘッダー／フッターを作成する方法を解説。また、ヘッダー／フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
6. 【現在、表示中】≫ jQuery Mobileページでローディング表示をカスタマイズするには？
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
7. jQuery Mobileページにボタンを配置するには？
jQuery Mobileページでボタンを設置するには、＜button＞／＜a＞／＜input＞要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
8. jQuery Mobileページでアイコン付きのボタンを配置するには？
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
