jquerymobile: navigation is not working with jquery.mobile-1.0a2

开发者 https://www.devze.com 2023-04-03 21:38 出处：网络

I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1. I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.ht

I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.

I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with he开发者_如何学Pythonad navigation bar with "Back" button.

Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.

Here is my sample code:

home.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body> 
<div data-role="page">
<div data-role="header" data-theme="b">
                  <h1>Home</h1>
</div>
<div data-role="content">
    <div id="banner">
        <h2></h2>
    </div>
    <ul data-role="listview">
        <li><a href="aboutus.html" >About Us</a>
    </li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

aboutus.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body> 
<div data-role="page">
<div data-role="header" data-theme="b">
    <h1>About Us</h1>
</div>
<div data-role="content">
    <div id="banner">
        <h2>About Us</h2>
    </div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html

For your link if you want to refer to external, try this: <a href="multipage.html" rel="external">Link</a>