JQM - $。mobile.pagecontainer不在内部页面上工作，但在外部页面上工作 [英] JQM-$.mobile.pagecontainer not working on internal pages but working on external pages
问题描述
我正在研究jquery移动页面导航，并面对JQM函数的奇怪行为。 p>
< html>
< head>
< meta name ='viewport'content ='width = device-width，initial-scale = 1'>
< link rel ='stylesheet'href ='http：//code.jquery.com/mobile/1.4.2/jquery.mobile-enter code here1.4.2.min.css'>
< script src ='http：//code.jquery.com/jquery-1.10.2.min.js'>< / script>
< script src ='http：//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js'>< / script>
< / head>
< body>
< div data-role =pageid =page1>
< div data-role =headerdata-position =fixedid =firstHeader>
< a href =＃onclick =$。mobile.pageContainer.pagecontainer（'home.html'{transition：'slide'，reverse：true}）; class =ui-btn ui-corner-all
ui-shadow ui-icon-home ui-btn-icon-left>主页< / a>
< h1> Customer Reg。 1·; / H1>
< / div>
< / div>
< / body>
< / html>
home.html
< html>
< head>
< / head>
< body>
< div data-role =pageid =page1>
< link rel =stylesheettype =text / csshref =../ css / cust_reg.css>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css>
< div data-role =header>
< h1>第1页< / h1>
< / div>
< div role =mainclass =ui-content>
< / div>
< / div>
< div data-role =pageid =page2>
< div data-role =header>
< h1>第2页< / h1>
< / div>
< div role =mainclass =ui-content>
< a href =＃page1data-rel =backdata-transition =slideclass =ui-btn ui-corner-all ui-btn-inline>返回页面1·; / A>
< / div>
< / div>
< / body>
< / html>
点击main.html的Home后，它会重定向到主页.html预计为
。但在点击home.html（重定向页面）的转到页面2后，它不会将
重定向到页面2，尽管它已经在home.html中。我曾尝试使用
$ .mobile.pageContainer.pagecontainer和$ mobile.changePage，但它的
无法正常工作
任何解决方案？
使用单页模型了解jQuery Mobile在每个file.html中加载 ONLY 首先 data-role = page 。它忽略了该div以外的所有内容。
如果您想在单页和多页模型，您需要导航到包含多页的其他没有Ajax的页面。 例如，从 main.html 添加到启用Ajax的 home.html ，jQM将只加载 page1 div。如果您想要加载 home.html 中的所有页面，则必须以这种方式禁用ajax。
< a href =home.html =external>主页< / a>
注意，您将失去转换效果当Ajax被禁用时。
I am working on jquery mobile page navigation and facing with strange behaviour of JQM functions.
I have two files main.html,home.html
1.Main.html
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.2/jquery.mobile-enter code here1.4.2.min.css'>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js'></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="firstHeader">
<a href="#" onclick="$.mobile.pageContainer.pagecontainer('home.html'{transition:'slide',reverse:true});" class="ui-btn ui-corner-all
ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
<h1>Customer Reg. 1</h1>
<a href="#secondForm" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn icon-left">Next</a>
</div>
</div>
</body>
</html>
home.html
<html>
<head>
</head>
<body>
<div data-role="page" id="page1">
<link rel="stylesheet" type="text/css" href="../css/cust_reg.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
<a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
</div>
</div>
</body>
</html>
After clicking on "Home" of main.html it redirecting to home.html as expected. but after clicking on "Go To Page 2" of home.html(redirected page) it is not redirecting to "page 2" though it is already in home.html. I have tried to use "$.mobile.pageContainer.pagecontainer" and "$mobile.changePage" but it is not working
Any solution?
When using Single Page Model, you need to understand that jQuery Mobile loads ONLY first data-role=page in each file.html. It neglects everything else outside that div.
If you want to mix between Single Page and Multi-Page Models, you need to navigate to other pages that contain multi-pages without Ajax.
For example, navigating from main.html to home.html with Ajax enabled, jQM will load page1 div only. If you want to load all pages within home.html, you have to disable ajax this way.
<a href="home.html" rel="external">Home</a>
Note that you will lose transition effect when Ajax is disabled.
这篇关于JQM - $。mobile.pagecontainer不在内部页面上工作，但在外部页面上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
