Question

我正在研究jquery移动页面导航，面对JQM功能的奇怪行为。
我有两个文件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>

点击main.html的“Home”后，它会重定向到home.html   预期。但是在点击home.html（重定向页面）的“转到第2页”后，它没有重定向   到“第2页”，虽然它已经在home.html。我试过用   “$ .mobile.pageContainer.pagecontainer”和“$ mobile.changePage”但它   不工作

任何解决方案？

Answer 1

使用单页模型时，您需要了解jQuery Mobile在每个file.html中首先加载仅 <{1}}。它忽略了div之外的所有其他内容。

如果要在单页和多页模型之间进行混合，则需要导航到包含多页的其他页面没有Ajax。

例如，在启用Ajax的情况下从 main.html 导航到 home.html ，jQM将仅加载data-role=page div。如果您要加载 home.html 中的所有页面，则必须以这种方式禁用ajax。

page1

注意，如果禁用Ajax，您将失去转换效果。

JQM - $ .mobile.pagecontainer不在内部页面上工作但在外部页面上工作

1 个答案: