Question

我刚刚下载了PhoneGap来试试。我制作了一个XCode项目，它的工作正常。然后，我想尝试一些jQuery Mobile，所以将它添加到Cordoba的默认Hello World页面中：

我补充说， head ：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

然后在正文：

<ul data-role="listview" data-inset="true" data-filter="true">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

我认为它会好起来，但看看它是怎么出来的：

enter image description here

以下是您想要查看的所有代码。我做错了吗？

<!DOCTYPE html> <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    </head>
    <body>
        <div>
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received"><a href="#" id="devReadyAnchor">Device is Ready</a></p>
            </div>

            <ul data-role="listview" data-inset="true" data-filter="true">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>

        </div>

        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body> </html>

Answer 1

我错过了

    <div data-role="content">

包装列表。这就是全部了。

以下是所有代码，以防对某人有用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>

        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>


    </head>
    <body>
        <div data-role="page">
            <div data-role="header">

                <h1>Apache Cordova</h1>

                </div>
            <div>
                <h1>Some text</h1>
            </div>

            <div data-role="content">

            <ul data-role="listview" data-inset="true" data-filter="true">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>
    </div>

        </div>

        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

PhoneGap上的jQuery Mobile - 列表示例看起来很糟糕，组件重叠

1 个答案: