Response title
This is preview!
JQueryMobile 1.0 Multi Page Navigation Problem.
in jQuery Mobile
•
11 years ago
Hi,
I am using JQM 1.0 , JQuery 1.6.4 and Phonegap 1.3.
Page Navigation using rel='external' on anchor tag it is navigating but the second page lost all the css.
Tested on Google Chrome Browser and Windows Phone 7 Simulator. CSS is not applied for second page.
1)First HTML Page
<body bgcolor="Yellow" onload="onLoad()">
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Multi-page Hello PhoneGap</h1>
</div>
<!-- /header -->
<div data-role="content" >
<div id="welcomeMsg"></div>
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<h3>Show internal pages:</h3>
<p>
<a href="two.html" rel="external" data-role="button" >Show page "two"</a>
</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
</body>
2) Second HTML File
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1>Two</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>
Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.
</p>
<p>
<a href="one.html" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a>
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
1
