Creating virtual pages dynamically using jQuery Mobile
Question
I try to link virtual pages using jQuery Mobile, but I have two problems :
- The first time when I load the page, the CSS is not applied.
- After when I choose a page and I want to change to another page, I notice that every time I passed by the page 1.
This is my example .
Code :
var nbrButton = 3;
$(document).ready(function(){
for(i = 1;i <= nbrButton;i++) {
$("body").append('<div id="p'+i+'" data-role="page" class="pages"><div data-role="content">Page'+i+'</br><a data-role="button" rel="internal" href="#p1" data-inline="true">1</a><a data-role="button" rel="internal" href="#p2" data-inline="true">2</a><a data-role="button" rel="internal" href="#p3" data-inline="true">3</a></div></div>');
}
$("#p1").show();
});
Could you tell me what is the problem or if there is a better way to do that.
Thank you.
3 answers
solution1
2 2013-03-21 14:52:02
You can't dynamically create new jQuery Mobile page (you can, but that page will not have styles) unless you have at least one existing. There's a workaround here, you can create an empty jQuery mobile page and use it to create a new one.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$('<div>').attr({'data-role':'page','id':'second'}).appendTo('body');
$('<div>').attr({'data-role':'header','id':'second-header'}).append('<h3>Header Title</h3>').appendTo('#second');
$.mobile.changePage("#second");
});
</script>
</head>
<body>
<div data-role="page" id="index">
</div>
</body>
</html>
Now you should use a pageshow page event of a first hidden page to create new dynamic pages. After page are cretaed just use change page to show a first visible page.
solution2
2 ACCPTED 2013-03-21 15:02:03
Update
I also removed data-rel="internal" in the links.
Answer
I have done the below.
instead of
$('#p1').show();
I add this
$.mobile.changePage( '#p1', { allowSamePageTransition: true });
It will refresh Page-1 p1 to reload styles.
Working example .
solution3
-1 2013-07-11 07:46:21
To apply CSS styles just add $("#p1").trigger('create'); as last line after $("#p1").show();
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.