【jQueryMobile】JavaScriptでローディング表示
2014年7月3日
jQueryMobileにてAJaxを無効化にすると画面遷移時にローディング画像が表示されなくなります。
せっかくのjQueryMobileなのでjQueryMobileの関数を使ってローディング表示させました。
jQuery表示時にローディングを設定する場合
[javascript]
$( document ).on( "mobileinit", function() {
$.mobile.loader.prototype.options.text = "Loading...";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
[/javascript]
で対応できます。
$.mobile.loader.prototype.options.textが表示したい文字列
$.mobile.loader.prototype.options.textVisibleはtrueにすることで$.mobile.loader.prototype.options.textが表示されます。
$.mobile.loader.prototype.options.themeはテーマの設定
$.mobile.loader.prototype.options.htmlはロードの表示をHTMLやCSS等で装飾したい場合に使用します。
また、各個別の関数でローディングを表示したい場合は以下の方法で実装できます。
[javascript]
function test(){
$.mobile.loading( "show", {
text: "Loading...",
textVisible: true,
theme: "z",
html: ""
});
}
[/javascript]
【show】のところを【hide】にすればローディングを非表示にすることもできます。
これは便利ですね。
※この関数はjQueryMobile1.2から実装されています。
参考:jQuery Mobile API Document