jQtouch和jquery加载叠加层

时间:2009-11-11 23:00:11

标签: jquery ajax jqtouch

我使用jQtouch创建了一个移动应用程序。我需要让用户知道他们按下表单按钮后加载ajax调用的时间。所以我想加载一个掩码和一个简单的加载gif。

我可以让它在应用程序的桌面版本上运行没有问题,但在带有jQtouch框架的移动设备上我不能。

我尝试了jquery-loadmask和jquery.loading插件。

任何人都有jQtouch的任何经验并创建加载通知吗?

3 个答案:

答案 0 :(得分:3)

不幸的是,该网站不会让我深入链接到相关部分,但您会在此页面的一半找到解决方案(只需cntr + F并搜索“进度指示器”):

http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35817310

这不是jQTouch特有的,但您应该可以使用jQTouch的init选项将其绑定并预加载加载图形。

希望有所帮助。

答案 1 :(得分:0)

您可以使用jQuery blockUI插件(http://jquery.malsup.com/block/)。我在一个项目中成功地使用它,它很容易集成。它适用于iPhone和Android。

答案 2 :(得分:0)

这适用于使用Zepto的jQTouch(尚未使用jQuery进行测试)。

HTML:

<div id="jqt">
    ...
    <div id="loading"></div>
</div>

CSS:

div#jqt #loading {
  background: rgba(0,0,0,0.5) url('../images/scanner/loading.gif') 50% 50% no-repeat;
  z-index: 999;
  position: fixed;
}

JS:

$(document).on('ajaxStart', function(){
    $('#loading').addClass('current');
});

$(document).on('ajaxStop', function(){
    $('#loading').removeClass('current');
});