jQuery Mobile Loader checkLoaderPosition() 方法

jQuery Mobile Loader是jQuery Mobile框架中的一个组件，用于在页面加载和处理中显示一个阻塞性的加载状态，给用户一个视觉上的提示。其中checkLoaderPosition()方法是jQuery Mobile Loader组件提供的一个函数，用于控制加载状态的位置和显示方式。

1. checkLoaderPosition()方法解析

checkLoaderPosition()方法的作用是检测loader（加载状态）的位置。jQuery Mobile Loader界面中的加载状态以类名.ui-loader和.ui-body类来表示，对于当前页面中存在且未隐藏的加载状态，checkLoaderPosition()方法会返回其相对偏移量（即相对于文档顶部和左侧的距离），否则返回false。

checkLoaderPosition()方法的语法如下：

checkLoaderPosition()

2. 示例说明

下面以两个示例说明checkLoaderPosition()方法的用法和效果。

示例一：获取加载状态相对偏移量

假设当前页面中存在下面这个加载状态：

<div class="ui-loader"><span class="ui-icon ui-icon-loading"></span></div>

则可以通过以下代码获取其相对偏移量：

var loaderOffset = $.mobile.loader.prototype.checkLoaderPosition();
if ( loaderOffset ) {
    console.log( "loader相对偏移量：" + loaderOffset.top + "px, " + loaderOffset.left + "px" );
} else {
    console.log( "当前页面中不存在或已隐藏loader" );
}

当loader存在且未隐藏时，console将输出"loader相对偏移量：xxxpx, xxxpx"，其中xxx为loader相对于文档顶部和左侧的距离。

示例二：显示全屏加载状态

假设需要在页面处理过程中显示一个全屏的加载状态，可以通过以下代码实现：

var $fullScreenLoader = $( "<div class='ui-loader-background'>" )
    .css({
        position: "absolute",
        top:0, bottom: 0, left: 0, right: 0,
        opacity: 0.5,
        backgroundColor: "#000"
    })
    .appendTo( "body" );
$.mobile.loading( "show", {
    text: "加载中...",
    textVisible: true,
    theme: "a",
    textonly: false
});

该示例先创建一个相对定位的父元素，然后创建一个绝对定位的子元素，并通过CSS设置其全屏覆盖整个页面。最后调用$.mobile.loading()方法显示加载状态，其中text、textVisible、theme、textonly为必选参数，分别表示显示的文字、是否显示文字、使用的主题、是否只显示文字（不显示图标）。

这样，页面处理过程中就会出现一个全屏的加载状态，等待页面处理结束后可以通过以下代码隐藏：

$.mobile.loading( "hide" );
$fullScreenLoader.remove();

该示例实现了一个全屏加载状态，并通过checkLoaderPosition()方法监测loader位置，在页面处理结束后隐藏并移除。