0

实际上，我正在使用 jQuery mobile 开发一个 phonegap android 应用程序，其中我设计了一个页面，该页面将退出模拟器和设备屏幕。请帮助我搜索但不了解如何将其保留在手机的范围内。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>

    <div data-role="page" id="device1">
        <div data-role="header" style="text-align: center;">Message one</div>
        <div data-role="content">
            <table width="100%" cellpadding="5" cellspacing="0" border="0">
                <tr>
                    <td align="left">InfodeepIndians</td>

                    <td align="right" colspan="2">3 Minutes ago</td>
                </tr>

                <tr>
                    <td colspan="3" align="justify">Samsung pioneered the trend of
                        a new breed of devices, now more commonly known as
                        'phablets',smartphones that are (almost) nearing tablets in size.</td>
                </tr>
                <tr>
                    <td align="left">By panel.</td>
                    <td align="center">21.12%</td>
                    <td align="right">21 / 30</td>
                </tr>
                <tr>
                    <td align="left" col><input type=text></td>
                    <td align="center"><input type=text></td>
                    <td align="right"><input type=text></td>
                </tr>
                <tr>
                    <td align="left" col><input type=button value="Nos Limit"></td>
                    <td align="center"><input type=button value="% delivery"></td>
                    <td align="right"><input type="button" value="% match"></td>
                </tr>
            </table>


        </div>
        <div data-role="footer" style="text-align: center;">@Copyrights</div>
    </div>
</body>
</html>
4

3 回答 3

0

我还没有编译代码，但你能把 jquery 版本改成 jquery-1.7.1.min.js，Jquery 9 有很多变化。如果正确请告诉我

于 2013-02-22T11:47:07.540 回答
0

用 jQuery 灵活网格替换您的表格。

您可以使用当前的网格实现，它看起来像这样：http: //jsfiddle.net/Gajotres/xftPB/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>

    <div data-role="page" id="device1">
        <div data-role="header" style="text-align: center;">Message one</div>
        <div data-role="content">
            <div class="ui-grid-b">
                <div class="ui-block-a">InfodeepIndians</div>
                <div class="ui-block-b"></div>
                <div class="ui-block-c" style="text-align: right;">3 Minutes ago</div>
            </div><!-- /grid-b -->
            <p style="text-align:justify;">Samsung pioneered the trend of
                        a new breed of devices, now more commonly known as
                        'phablets',smartphones that are (almost) nearing tablets in size.</p>
            <div class="ui-grid-b">
                <div class="ui-block-a">By panel.</div>
                <div class="ui-block-b">21.12%</div>
                <div class="ui-block-c">21 / 30</div>
            </div><!-- /grid-b -->            
            <div class="ui-grid-b">
                <div class="ui-block-a"><input type="text"></div>
                <div class="ui-block-b"><input type="text"></div>
                <div class="ui-block-c"><input type="text"></div>
            </div><!-- /grid-b -->
            <div class="ui-grid-b">
                <div class="ui-block-a"><input type=button value="Nos Limit"></div>
                <div class="ui-block-b"><input type=button value="% delivery"></div>
                <div class="ui-block-c"><input type="button" value="% match"></div>
            </div><!-- /grid-b -->            
        </div>
        <div data-role="footer" style="text-align: center;">@Copyrights</div>
    </div>
</body>
</html>

如果您需要更好的网格灵活性，请使用 jQuery Mobile 的第 3 方网格实现：http: //jeromeetienne.github.com/jquery-mobile-960/

于 2013-02-22T12:07:49.700 回答
0

使用Grids比tables在 Jquery Mobile 中使用更可靠。

ui-grid-b由 3 列组成。

这是一个例子

<div class="ui-grid-b">
<!-- First row-->
      <div class="ui-block-a"><input type=text></div>
      <div class="ui-block-b"><input type=text></div>
      <div class="ui-block-c"><input type=text></div>
<!-- Second row-->
      <div class="ui-block-a"><input type=button value="Nos Limit"></div>
      <div class="ui-block-b"><input type=button value="% delivery"></div>
      <div class="ui-block-c"><input type="button" value="% match"></div>
</div>

JSfiddle：网格

于 2013-02-22T12:10:20.150 回答