我正在使用jquery mobile制作HTML5移动网站。它有五种页面,采用一种向导格式,每个页面查询一个Web服务以检索数据。在最后一页上有一个HTML表,该表在代码中预定义,该表填充了来自Web服务的数据。没有动态添加行只是表格单元格中的占位符填充了数据。
此表在样式表中定义了一些样式,在使用桌面或移动浏览器访问时看起来很好。然而,我也正在使用PhoneGap“Build”将移动网站编译成适用于Android,iOS等的原生应用程序。除了最后一页之外,这个工作表也没有问题,桌子没有拿起样式而且完全没有样式。
您可以在此处查看页面:http:// m.freebets4all .com(删除空格)。只需在向导中移动到最后一页(选择Betfred,Qualifying Bet和任何Calculate按钮。当通过Phone gap生成的app访问时,最后一页上的绿表完全没有样式。
使用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>
答案 0 :(得分:1)
你确定该文件夹的CSS文件名为Styles而不是样式,它区分大小写。