[jQuery mobile]jQuery mobileでローディング画面を表示

jQuery mobileを使ってローディング画面を表示する方法を調査しました。

Loaderを見ると純粋に下記のコードでいけそうだ。

$.mobile.loading( "show", {
      text: $.mobile.loader.prototype.options.text,
      textVisible: false,
      theme: $.mobile.loader.prototype.options.theme,
      textonly: false,
      html: ""
});

クローズする場合は、下のコードで。

$.mobile.loading( "hide" );

ただ、これだけだと、ローディング中でもコンテンツにタップできてしまうので、マスクをつけてタッチさせないこともできる。

var $html = $('html,body');
var $mask = $('<div class="mask"></div>');
$html.append($mask);
$.mobile.loading( "show", {
      text: $.mobile.loader.prototype.options.text,
      textVisible: false,
      theme: $.mobile.loader.prototype.options.theme,
      textonly: false,
      html: ""
});

クローズする場合は、下のコードで。

$.mobile.loading( "hide" );
$('.mask').remove();