0

実際、私はjQueryモバイルを使用して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

グリッドの使用tablesは、JqueryMobileで使用するよりも信頼性があります。

ui-grid-b3列で構成されています。

これが例です

<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 に答える
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 用の次のサードパーティ グリッド実装を使用してください: http://jeromeetienne.github.com/jquery-mobile-960/

于 2013-02-22T12:07:49.700 に答える
0

コードをコンパイルしていませんが、jquery のバージョンを jquery-1.7.1.min.js に変更できますか? Jquery 9 には多くの変更があります。正しければ教えてください

于 2013-02-22T11:47:07.540 に答える