No transitions and other issues on jQuery Mobile single and multi-page website
Question
I'm really struggling to load a multi-page template with Phonegap and using jQuery.
Here I have two pages ( home and 1 ) but when I load the page it just displays the second "page" div ( 1 , not home ) and no link changes the page.
With the pages as two separate .html files I could not get the transitions to work - and here I'm a step even further behind, as I can't even change pages!
Code:
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<body>
<div data-role="page" id="home">
<div id="header"><h1>Title</h1></div>
<div id="wrapper">
<div id="scroller">
<div id="content">
<a href="#1" data-transition="slide">Link to Page 2</a>
</div>
</div>
</div>
<div id="footer"><a href="about.html"><div class="footer_abt"></div></a></div>
</div>
<div data-role="page" id="1">
<div id="header"><h1>Tummy Time</h1></div>
<div id="wrapper">
<div id="scroller">
<div id="content">
<!-- Content Here -->
</div>
</div>
</div>
<div id="footer">
<a href="#home"><div class="footer_home"></div></a>
</div>
</div>
</body>
1 answers
solution1
0 2013-01-29 16:29:40
jQuery Mobile, to the best of my knowledge, is not meant to work for multiple static pages. I mean, I guess you could do that, but I doubt any of the transitions would work. Further, it definitely won't work if you compile via PhoneGap.
If you want multiple views, I would suggest switching to an MVC js framework like Backbone.js or Sencha Touch.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.