Php 使用jQuery Mobile动态创建虚拟页面
我尝试使用jQuery Mobile链接虚拟页面，但有两个问题：Php 使用jQuery Mobile动态创建虚拟页面,php,javascript,jquery,ajax,jquery-mobile,Php,Javascript,Jquery,Ajax,Jquery Mobile,我尝试使用jQuery Mobile链接虚拟页面，但有两个问题： 第一次加载页面时，CSS没有应用 当我选择一个页面并想切换到另一个页面时，我注意到每次经过第1页时 这是我的 代码： var nbrButton = 3; $(document).ready(function(){ for(i = 1;i <= nbrButton;i++) { $("body").a
- 第一次加载页面时，CSS没有应用
- 当我选择一个页面并想切换到另一个页面时，我注意到每次经过第1页时
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();
});
var按钮=3；
$（文档）.ready（函数（）{
对于（i=1；i您不能动态创建新的jQuery移动页面（可以，但该页面不会有样式），除非您至少有一个现有页面。这里有一个解决方法，您可以创建一个空的jQuery移动页面并使用它创建一个新页面
下面是一个工作示例：
<!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>
jQM复杂演示
$（document）.on（'pageshow'，'#index'，function（）{
$（''）.attr（{'data-role'：'page'，'id'：'second'}）.appendTo（'body'）；
$（''）.attr（{'data-role'：'header'，'id'：'second-header'}）.append（'header-Title'）.appendTo（'#second'）；
$.mobile.changePage（“#秒”）；
});
现在，您应该使用第一个隐藏页面的pageshow page事件来创建新的动态页面。页面创建后，只需使用change page来显示第一个可见页面。更新
我还删除了链接中的data rel=“internal”
回答
我已经完成了以下工作
而不是
$('#p1').show();
我加上这个
$.mobile.changePage( '#p1', { allowSamePageTransition: true });
它将刷新第1页p1
以重新加载样式
工作。要应用CSS样式，只需添加$（“#p1”）.trigger（'create'）；
作为$（“#p1”）.show（）之后的最后一行
问题是我事先不知道页数..谢谢。对于我的示例，这为什么是个问题？只需在pageshow示例中复制您的代码即可。太好了！这仍然是第二个问题。谢谢。当移到其他页面时，第1页不会出现。这是您的第二个问题吗？是的！我忘记删除$（'#p1'）。show（）很高兴我能帮上忙。