jQuery Mobile 加载器 hide() 方法

在开发移动端网页应用时，我们经常需要向用户展示加载中的提示框，提示用户服务正在处理中，同时避免用户的误操作造成程序的崩溃。使用 jQuery Mobile 框架，可以通过其中的加载器（Loader）组件方便地实现这个功能。

通过调用 jQuery Mobile 的 $.mobile.loading() 方法，我们可以显示加载器。加载器有不同的显示样式和颜色，我们可以根据不同的需求进行选择。当服务已经处理完毕，我们可以通过调用加载器的 hide() 方法将加载器隐藏起来。

$( document ).on( "pageinit", "#page-demo", function() {
  // 显示加载器
  $.mobile.loading( "show", {
    text: "处理中",
    textVisible: true,
    theme: "b",
    html: ""
  });
  
  // 模拟服务处理
  setTimeout(function(){
    // 隐藏加载器
    $.mobile.loading( "hide" );
  }, 3000);
});

在以上代码片段中，我们首先通过 $.mobile.loading() 方法显示了一个加载器，其中 show 方法用于展示加载器，text 属性用于指定加载器中显示的文本，theme 属性用于指定加载器的颜色样式，html 属性用于指定在文本下方显示的 HTML 元素。

在加载器展示后，我们可以通过 setTimeout 函数模拟服务操作过程，可以将其中的代码替换为实际的服务代码。在服务操作结束后，我们通过调用 $.mobile.loading( "hide" ) 方法隐藏了加载器。

除了在 setTimeout 函数中使用 $.mobile.loading( "hide" ) 方法，我们也可以在服务完成后的回调函数中使用。

$( document ).on( "pageinit", "#page-demo", function() {
  // 显示加载器
  $.mobile.loading( "show", {
    text: "处理中",
    textVisible: true,
    theme: "b",
    html: ""
  });
  
  // 模拟服务处理
  $.ajax({
    url: "your service url",
    success: function(data){
      // 隐藏加载器
      $.mobile.loading( "hide" );
    }
  });
});

在以上代码片段中，我们使用 jQuery 的 $.ajax() 方法模拟了一个服务操作，当服务执行成功后，我们在 success 回调函数中调用了 $.mobile.loading( "hide" ) 方法，隐藏了加载器。

通过学习本文介绍的方法，你可以方便地在 jQuery Mobile 移动端网页应用中使用加载器组件，为用户提供更好的体验。