jQuery Mobile加载微调器是否可以用于特定的页面元素？

Question

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

这是可能的，还是我需要阻止整个页面或引入像BlockUI这样的东西？

我正在使用jQuery Mobile 1.2.0 Alpha。

谢谢！

Answer 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;
}

Answer 2

这有用吗？

示例：

• http://jsfiddle.net/UNmEh/

JS

// 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>

Answer 3

$.mobile.loadingMessageTextVisible = true;

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