$.mobile.changePage期间的$.mobile.loading动画
$.mobile.changePage期间的$.mobile.loading动画
提问于 2013-03-28 01:44:57
我在这个问题上挣扎了一段时间。我的目的是在$.mobile.changePage方法将用户重定向到另一个页面时向用户显示旋转的轮子。然而，我发现的解决方案都不适合我。这一定是changePage方法有什么问题，因为当我把changePage方法放好的时候，旋转的轮子就出现了。谢谢你的帮助。
下面是我的代码片段：
<!DOCTYPE HTML>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body onload="onBodyLoad();">
<!-- LOGIN PAGE -->
<div data-role="page" id="login_page">
<div data-role="content" id="login_content">
<div id="buttons">
<button value="Login" id="login">Login</button>
<button value="Logout" id="logout">Logout</button>
</div>
</div>
</div>
<!-- TIMELINE PAGE -->
<div data-role="page" id="timeline_page">
<div data-role="header" id="timeline_head" data-nobackbtn="true">
<h1>BlueBirdGap</h1>
<h2>Timeline</h2>
<a id="timeline_button_back" data-icon="arrow-l" class="ui-btn-left"
href="javascript:return true;" data-role="button" data-inline="true">Zpět</a>
<div data-role="controlgroup" class="ui-btn-right">
<a id="logout_button" data-icon="delete" data-role="button">Logout</a>
<a id="new_tweet_button" data-icon="plus" data-role="button" data-theme="b">Tweet</a>
<hr>
</div>
</div>
<div data-role="content" id="timeline_content">
<div id="new_tweet_area">
<textarea id="tweet_text"></textarea>
<button data-role="button" data-icon="plus" data-theme="b" class="ui-btn-right" onclick="Twitter.post()">Post</button>
</div>
<div id="home_timeline"></div>
</div>
<div data-role="footer" id="timeline_footer"></div>
</div>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
cb = window.plugins.childBrowser;
$('html').addClass( "ui-loading" );
if(localStorage.getItem(twitterKey)){
showLogin(1);
$.mobile.loading('show');
Twitter.timeline();
$.mobile.changePage('#timeline_page', {transition: "slide"});
$.mobile.loading('hide');
}
}
</script>我要补充的是，我正在开发一个使用PhoneGap框架和JQM 1.3.0的安卓应用程序。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-28 02:19:23
使用$.mobile.showPageLoadingMsg();和$.mobile.hidePageLoadingMsg();而不是$.mobile.loading();。
但是，如果它们不起作用，请使用以下代码。
以显示正在加载的微调器。
$('div.ui-loader').show();把它藏起来。
$('div.ui-loader').hide();加载微调器隐藏在</body>之前的div中，如下所示。你所需要做的就是使用show();或者hide();。
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default" style="display: block;">
<span class="ui-icon ui-icon-loading">
</span>
<h1>loading</h1>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15665777
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号