我的jQm程序需要生成包含jqm页面的嵌套标签(通过riotjs)。这导致jqm 1.4.5找不到嵌套页面。我在Navigate to page that is inside div tag in JQuery Mobile找到了jqm 1.3.2的解决方案,但1.4.5我在代码和http://api.jquerymobile.com/pagecontainer/中挣扎。我的多页设置如下:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button" class="to-body-page">Go to Page 2 - body container</a>
<a href="#page2" data-role="button" class="to-container-page">Go to Page 2 - different container</a>
</div>
</div>
<div data-role="page" id="page2" >
<div data-role="header">
<h1>Page 2 - body container</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">Go to Page 1</a>
</div>
</div>
<!-- container 2 -->
<decision-keys>
<decisiontree>
<decision>
<div id="Container2">
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<h1>Page 2 - different Container</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">Go to Page 1</a>
</div>
</div>
</div>
<!-- /container 2 -->
</decision>
</decisiontree>
</decision-keys>
JavaScript的:
// modified from http://jsfiddle.net/Palestinian/b4YJL/
$(".to-container-page").on("click", function (e) {
/* Version jQm 1.3.2
$.mobile.pageContainer = $("#Container2");
$.mobile.changePage("#page2", {
transition: "none"
});
*/
/* Version jQm 1.4.5 */
$('#Container2').pagecontainer( );// ?correct
$('#Container2').pagecontainer(
"change", "#page2"
);
});
$(".to-body-page").on("click", function (e) {
/* Version jQm 1.3.2
$.mobile.pageContainer = $("body");
$.mobile.changePage("#page2");
*/
/* Version jQm 1.4.5 */
$('body').pagecontainer();
$('body').pagecontainer(
"change", "#page2"
);
});
如果我只使用$('#Container2').pagecontainer("change", "#page2");
jQuery报告:
错误:在初始化之前无法调用pagecontainer上的方法;试图调用方法&#39;更改&#39;
我创建了一个演示,但它从嵌套的pagecontainer返回到body-pagecontainer:https://jsfiddle.net/InfiniteDao/3vnsho76/
如果页面容器不是body
的直接子项,那么它是否正确使用了什么?我想知道如何在jqm 1.4.5中正确使用它,你能提供任何帮助吗?
非常感谢。