Question

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

Answer 1

我没有编译代码，但你可以将jquery版本更改为jquery-1.7.1.min.js，Jquery 9有很多变化。如果正确请告诉我

Answer 2

用jQuery flexible grid替换你的表。

您可以使用当前网格实现，它将如下所示：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的第三方网格实现：http://jeromeetienne.github.com/jquery-mobile-960/

Answer 3

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

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：Grids

jQuery移动网页走出移动屏幕

3 个答案: