PhoneGap + jQuery Mobile で非常にシンプルなアプリを作成しています。目的は、PhoneGap アプリケーションの作成に自信を持つことです。
このアプリは非常にシンプルです。ナビゲーションバー付きの HomePage があります。ナビゲーション バーには、連絡先、カレンダー、ドキュメントの 3 つのボタンがあります。
ボタンは、要素内の 3 つのタブを管理します<div data-role="content">。これらの 3 つのタブを非表示にしました。ユーザーがナビゲーションバーをタップすると、タブを正しくナビゲートできます。
ここで、問題: 最初のタブに連絡先を正常にロードしましたが、そこに移動すると、仕切りしか表示されません! 代わりに、ホームの [連絡先] タブを非表示にしないと、連絡先が正しく表示されます。ユーザーがまだホームページにいる間にすべてのデータをロードしたいと思います。そのため、彼が何をすべきかを決定している間、アプリにはそれらを読み込むのに十分な時間が必要です。
次のスクリーンショットは、私が何を意味するかを示しています。
なぜこれが起こるのですか？私のコードが必要な場合は、ここにあります (重要な部分のみ! ;))
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();
}
ご助力ありがとうございます。リク