かえでBlog

色々なことを徒然と……

【jQueryMobile】JavaScriptでローディング表示

   

jQueryMobileにてAJaxを無効化にすると画面遷移時にローディング画像が表示されなくなります。

せっかくのjQueryMobileなのでjQueryMobileの関数を使ってローディング表示させました。

jQueryMobile Loading

jQuery表示時にローディングを設定する場合

$( 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 = "";
});

で対応できます。

$.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等で装飾したい場合に使用します。

 

また、各個別の関数でローディングを表示したい場合は以下の方法で実装できます。

function test(){
	$.mobile.loading( "show", {
	  text: "Loading...",
	  textVisible: true,
	  theme: "z",
	  html: ""
	});
}

【show】のところを【hide】にすればローディングを非表示にすることもできます。

 

これは便利ですね。

※この関数はjQueryMobile1.2から実装されています。

参考:jQuery Mobile API Document

 - JavaScript, jQueryMobile , ,