jQuery Mobile not working

 

I want to create my first phonegap mobile app but already have problems with jQuery Mobile. I've included the necessary files but the page transition does not work. All the different pages are displayed underneath each other.

Any help is very appreciated.

Thanks, enne 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <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" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <title>Blaue Elf Linz</title>
</head>
<body>

    <div data-role="page" id="pageone">
      <div data-role="header">
        <h1>Welcome To My Homepage</h1>
      </div>

      <div data-role="main" class="ui-content">
        <p>Welcome! If you click on the link below, it will take you to Page Two.</p>
        <a href="#pagetwo">Go to Page Two</a>
      </div>

      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div> 

    <div data-role="page" id="pagetwo">
      <div data-role="header">
        <h1>Welcome To My Homepage</h1>
      </div>

      <div data-role="main" class="ui-content">
        <p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
        <a href="#pageone">Go to Page One</a>
      </div>

      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div> 

    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jquery-1.1.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

I don't see inclusion of JQuery Mobile stylesheet in your file. Something like 

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />

has to be included.

Also JQuery filename 

<script type="text/javascript" src="js/jquery-1.1.0.min.js"></script>

looks very suspicious.

1). If you typo there (at Stackoverflow) or for some strange reasons rename file (which is actully newer version) - than it's ok.
2). If you typo in your html-code - you should fix it (1.10.0 or whatever it is).
3) If you use very old (1.1.0) version of JQuery, than you should use newer version (at least 1.9.1).

The platforms jQuery, jQuery Mobile and PhoneGap needs to be loaded in the header. The header stays in the DOM and jQuery pulls the content from the pages in through Ajax. You have added them to your body, and I guess that doesn't work because he sees it as a part of the content (between the body tags).

链接地址: http://www.djcxy.com/p/61936.html

上一篇: 如何整合amcharts和Ember.js？

下一篇: jQuery Mobile无法正常工作