JavaScript jQueryMobile

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

2014年7月3日

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

せっかくのjQueryMobileなのでjQueryMobileの関数を使ってローディング表示させました。 jQueryMobile Loading 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

-JavaScript, jQueryMobile
-, ,