可以在特定页面元素上使用 jQuery Mobile 加载微调器吗？答案

【问题标题】：Can the jQuery Mobile loading spinner be used over specific page elements?可以在特定页面元素上使用 jQuery Mobile 加载微调器吗？
【发布时间】：2012-12-24 22:00:41
【问题描述】：

我正在编写一个专为平板电脑设计的应用程序，每次选择表中的一行时我都需要加载数据。选择一行后，我想将微调器放置在将加载新数据的 div 上。

这可能吗，还是我需要屏蔽整个页面或引入 BlockUI 之类的东西？

我正在使用 jQuery Mobile 1.2.0 Alpha。

谢谢！

【问题讨论】：

不是我想要的。加载器仍然只是以页面为中心。想一想 iPad 拆分视图，我只想将加载程序放在右窗格上。
我收回这句话，我知道你在做什么。让我试一试。

标签： ajax jquery jquery-mobile

【解决方案1】：

像这样？？？

DEMO

jQuery：

function loadData(id) {
    
    var btnID = id;
    $.ajax({
        
        url: "http://fiddle.jshell.net/akhurshid/g2tD5/show/",       
       
           beforeSend: function() {
            $('.loader').html('<img src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Wait" />');
           },
              
           success: function(data) {           
               $('.loader').fadeTo('fast','0.0');
               $('#' + btnID).fadeTo('fast','0.0'); 
            
                var htmlData = $('.result').html(data).hide().css('opacity','0');
            
                $(htmlData).fadeTo('fast','1.0');                                 
           }
    });
}

HTML：

<div id="wrapper">
    <div class="loader"></div>
    <div class="result"></div>
    <button id="load-btn" onclick="loadData(this.id);">Load Data Here</button>
</div>

CSS：

#wrapper{
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #777;
    background: #ccc;
}

.loader{
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 9999;
    display: block;
}

【讨论】：

【解决方案2】：

这行得通吗？

例子：

http://jsfiddle.net/UNmEh/

// show the loader
$.mobile.showPageLoadingMsg();

// Move the loader left 30 pixels
$('div.ui-loader').attr('style','left:30px;');

HTML

<div data-role="page" id="placeholder-page">
</div>

【讨论】：

【解决方案3】：

$.mobile.loadingMessageTextVisible = true;

$.mobile.showPageLoadingMsg("b", "please wait...");

【讨论】：