我正在PhoneGap + jQuery Mobile 中编写一个非常简单的应用程序。目的是在编写 PhoneGap 应用程序时更有信心。
该应用程序非常简单:它有一个带导航栏的主页。导航栏有三个按钮:联系人、日历和文档。
这些按钮管理<div data-role="content">
元素中的三个选项卡。我已经隐藏了这三个标签。当用户点击导航栏时,我可以正确浏览选项卡。
现在,问题是:我在第一个选项卡中成功加载了联系人,但是当我导航到它时,我只看到分隔线!相反,如果我不在家中隐藏联系人选项卡,我可以正确地看到联系人。我想在用户仍在主页时加载所有数据。因此,当他决定要做什么时,应用程序应该有足够的时间来加载它们。
以下屏幕截图显示了我的意思:
为什么会发生这种情况?如果您需要我的代码,这里是(仅重要部分!;))
HTML:
<!-- Home jQueryMobile page -->
<div data-role="page" id="homePage" data-dom-cache="true">
<!-- Header -->
<div data-role="header" id="homePageHeader" data-position="fixed">
<h1>Frankie App</h1>
</div>
<!-- android style navbar. If the device is not an android, it
will not be shown -->
<div data-role="navbar" id="androidNavBar" hidden>
<ul>
<li><a href="#" onclick="showTab(contactsTab)">Contatti</a></li>
<li><a href="#" onclick="showTab(calendarTab)">Calendario</a></li>
<li><a href="#" onclick="showTab(docsTab)">Documenti</a></li>
</ul>
</div>
<!-- Page content: it contains 4 tabs. The home + the 3 tabs reachable by the navbar-->
<div data-role="content">
<div id="homeLogger" hidden>Logger</div> <!-- I use this div as a console to debug -->
<div id="tabs">
<div id="homeTab">
<p align="center">
<img src="http://leaderchat.files.wordpress.com/2011/10/bigstock_cartoon_frankenstein_moster_as_151295541.jpg" height="280"/>
</p>
</div>
<div id="contactsTab">
<h1>Contacts</h1>
<ul id="contactList" data-role="listview" data-autodividers="true" data-inset="true">
</ul>
</div>
<div id="calendarTab" hidden>
<h1> Calendar </h1>
</div>
<div id="docsTab" hidden>
<h1> Documents </h1>
</div>
</div>
</div>
<!-- Footer -->
<div data-role="footer" id="homePageFooter" data-position="fixed">
<!-- iOS style navbar. If the device is not an iPhone, it
will not be shown -->
<div data-role="navbar" id="iOSNavBar" hidden>
<ul>
<li><a href="#" onclick="showTab(contactsTab)">Contatti</a></li>
<li><a href="#" onclick="showTab(calendarTab)">Calendario</a></li>
<li><a href="#" onclick="showTab(docsTab)">Documenti</a></li>
</ul>
</div>
</div>
</div>
JS:
$('#homePage')
.bind('pageinit',
function(){
//Comment the next line to remove the logger from the home page
$("#homeLogger").show();
$("#homeLogger").text("jQuery Initialized");
//Registering to PhoneGap/Cordova lifecycle events
$(document).bind('deviceready', initialize)
});
// ============ //
// Initializers //
// ============ //
function initialize()
{
$("#homeLogger").text("device ready");
initNavBar();
initContacts();
}
function initNavBar()
{
//Retrieve the device platform using PhoneGap
platform = window.device.platform;
$("#homeLogger").text("detected platform: "+platform);
var navbar = null;
if(platform && platform == Constants.ANDROID){
navbar = $("#androidNavBar");
$("#homeLogger").text("show Android navBar");
} else {
//If the platform is not an android, I keep the bottom
//navbar because I prefer its look
navbar = $("#iOSNavBar");
$("#homeLogger").text("show iOS navBar");
}
if(navbar) //safety check to avoid null reference.
navbar.show(); //jQuery show() method
}
function initContacts(){
$("#homeLogger").text("loading contacts...");
var contManager = new ContactManager();
contManager.getAllContacts(["id", "name"],
function(retrievedContacts){
for(var i=0; i<retrievedContacts.length; i++){
var toAppend = "<li><a href='#'>"+retrievedContacts[i].name.formatted+"</a></li>";
$("#contactList").append(toAppend);
$("#homeLogger").text("element appended "+i);
}
$("#homeLogger").text("element "+$("#contactListview"));
$("#contactList").listview('refresh');
$("#homeLogger").text("list refreshed");
},
function(error){
$("#homeLogger").text("error: "+error);
});
}
// ========== //
// Navigation //
// ========== //
function showTab(tab)
{
$("#homeLogger").text("Selected Tab: "+tab);
$("#tabs").find("div").hide();
$("#"+tab.id).show();
}
非常感谢您的帮助。里克