Fatal编程技术网
  • iphone/
  • Iphone PhoneGap上的jQuery Mobile-列表示例看起来不好，组件重叠

Iphone PhoneGap上的jQuery Mobile-列表示例看起来不好，组件重叠

iphone cordova

Iphone PhoneGap上的jQuery Mobile-列表示例看起来不好，组件重叠,iphone,cordova,jquery-mobile-listview,Iphone,Cordova,Jquery Mobile Listview,我刚下载了PhoneGap来试试。我做了一个XCode项目，它工作正常。然后，我想在其上尝试一些jQuery Mobile，因此将其添加到科尔多瓦的默认Hello World页面： 我在头上加了一句： <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-

我刚下载了PhoneGap来试试。我做了一个XCode项目，它工作正常。然后，我想在其上尝试一些jQuery Mobile，因此将其添加到科尔多瓦的默认Hello World页面：

我在头上加了一句：

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

    

  • 

  • 

  • 

  • 

  •
我以为一切都会好起来，但看看结果如何：

这是所有的代码，以防你想看一下。我做错什么了吗

<!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>


你好，世界
阿帕奇科尔多瓦酒店
连接到设备




    

  • 

  • 

  • 

  • 

  • 


app.initialize（）；
我错过了

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


你好，世界
阿帕奇科尔多瓦酒店
一些文本

    

  • 

  • 

  • 

  • 

  • 


app.initialize（）；
我错过了

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


你好，世界
阿帕奇科尔多瓦酒店
一些文本

    

  • 

  • 

  • 

  • 

  • 


app.initialize（）；