jquery mobile を使用して HTML5 モバイル Web サイトを作成しています。一種のウィザード形式の 5 つのページがあり、各ページは Web サービスにクエリを実行してデータを取得します。最後のページには、コードで定義済みの HTML テーブルがあり、Web サービスからのデータが取り込まれます。行は動的に追加されず、テーブル セルのプレースホルダーにデータが入力されるだけです。
このテーブルには、スタイルシートで定義されたスタイルがいくつかあり、デスクトップまたはモバイル ブラウザーでアクセスすると問題なく表示されます。ただし、PhoneGap の「ビルド」を使用してモバイル Web サイトを Android、iOS などのネイティブ アプリにコンパイルしています。
ここでページを見ることができます: http:// m.freebets4all .com (スペースを削除してください)。ウィザードを最後のページに移動するだけです (たとえば、Betfred、Qualifying Bet、および [Calculate] ボタンのいずれかを選択します)。最後のページの緑色のテーブルは、Phone ギャップ生成アプリを介してアクセスすると、完全にスタイル設定されていません。
PhoneGap Build でコンパイルしたときに表のスタイルが設定されないのはなぜですか? これを説明するドキュメントや、PhoneGap で HTML テーブルのスタイルを設定した経験のあるドキュメントを教えてもらえますか?
これが問題のページで、html で定義済みのテーブルを示しています。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="phoneGap.js"></script>
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="Styles/site.css" />
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="Scripts/Class.js"></script>
<script type="text/javascript" src="Scripts/matcher-1.0.js"></script>
</head>
<body>
<form>
<div class="main">
<div data-role="page" id="summary" data-title="Place Your Bets">
<script>
$('#summary').live('pagebeforecreate', function (event) {
var betSummary = new BetSummary($("#summaryTable"), localStorage.selectedBet);
setTimeout(function () { betSummary.displaySummary(); }, 1);
setTimeout(function () { $("summary").trigger('create') }, 2000);
});
</script>
<div data-role="header">
<h1>
Place your bets...</h1>
</div>
<div data-role="content">
<div class="content">
<div id="betInstructionsContainer" class="content">
<table class="matchedBet" data-role="table" id="summaryTable" data-mode="reflow">
<caption>
<p id="iDateLabel">
</p>
<p id="iMatchLabel">
</p>
<p id="iMarketLabel">
</p>
</caption>
<thead>
<tr>
<th>
</th>
<th>
Back
</th>
<th>
Lay
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
</th>
<td>
<span id="iPlLabel" class="loss"></span>
</td>
</tr>
<tr>
<th>
</th>
<td>
<span id="iGainLabel" class="gain"></span>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>
</th>
<td>
<a id="iBookieLabel" title="" href="">
<img id="iBookieImage" alt="10Bet" src="Images/logos/75x16/10Bet.gif">
</a>
</td>
<td>
<a id="iExchangeLabel" title="Click to go to the BetDaq website" href="http://www.freebets4allstage.co.uk/bookmaker/BetDaq/">
<img id="iExchangeImage" alt="BetDaq" src="Images/logos/75x16/BetDaq.gif">
</a>
</td>
</tr>
<tr>
<th id="iOddsHeader">
Odds
</th>
<td id="iBackOdds">
</td>
<td id="iLayOdds">
</td>
</tr>
<tr>
<th id="iStakeLabel">
Stake
</th>
<td id="iBackStake">
</td>
<td id="iLayStake">
</td>
</tr>
<tr>
<th id="iRiskLabel">
Risk
</th>
<td id="iBackRisk">
</td>
<td id="iLayRisk">
</td>
</tr>
<tr>
<th id="iProfitLabel">
Win
</th>
<td id="iBackProfit">
</td>
<td id="iLayProfit">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div data-position="fixed" data-role="footer">
<p class="gotosite">
<a href="http://www.freebets4all.com">Go to full website</a></p>
<p id="errorMessage">
</p>
</div>
</div>
</div>
</div>
</form>
</body>