CODEWITHSUNDEEP
jquery-mobile
Venkat Papana
Venkat Papana

Reputation: 4947

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

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

Upvotes: 0

Views: 2796

Answers (1)

dotchuZ
dotchuZ

Reputation: 2651

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>

Upvotes: 5

Related Questions