使用PhoneGap编译移动网站时,为什么HTML表格没有样式?

时间:2012-12-29 18:57:33

标签: cordova jquery-mobile

我正在使用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>

1 个答案:

答案 0 :(得分:1)

你确定该文件夹的CSS文件名为Styles而不是样式,它区分大小写。