PPD*_*PPD 5 javascript jquery jquery-ui jquery-mobile cordova
大家好我从index.html导航到test.html,因为$.mobile.changePage("test.html", {transition : "slide"}); 它工作正常.但是在我的test.html中,不同的div中有多个html页面.在test.html中我调用不同的html页面,它位于同一个html文件(ietest.html)中的不同div中,$.mobile.changePage("#secondtestPage", {transition : "slide"}); 但是这里它不会导航到secondtestPage.我的index.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Ins ide callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("test.html", {transition : "slide"});
}
</script>
</body>
</html>
现在页面导航到test.html,我的test.html看起来像:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
</div>
<script type="text/javascript">
function callnewSecondPage()
{
alert ("Inside callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("#secondtestPage", {transition : "slide"});
//$.mobile.changePage("index.html", {transition : "slide"});
}
</script>
</div>
<div data-role="page" id="secondtestPage" onclick=callThirdPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdtestPage');
}
</script>
</div>
<div data-role="page" id="thirdtestPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthtestPage');
}
</script>
</div>
<div data-role="page" id="fourthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
</div>
</div>
<div data-role="page" id="fifthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
</div>
</div>
<div data-role="page" id="sixthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
</div>
</div>
</body>
</html>
但现在点击按钮,它不会导航到"callSecondPage".如果我调用$.mobile.changePage("index.html", {transition : "slide"}); 它然后正确导航到index.html,那么为什么在multipage changePage不起作用？还有一件事如果我用test.html代码替换index.html代码,那么$.mobile.changePage("#secondtestPage", {transition : "slide"});效果很好.
我很困惑为什么它表现得像这样？任何建议将不胜感激.提前致谢.
jQuery Mobile将异步加载test.html文件的内容以转换到它.您callSecondPage()在index.html和test.html中的同一范围内定义了一个函数,这可能是错误的.尝试在test.html中将其命名为不同的内容并报告回来.
编辑:
好的,事实证明,jQuery Mobile并没有实际加载除第一个以外的所有其他data-role ="page"页面.如果您在从index.html转换到test.html时检查DOM,您会注意到缺少第二页,第三页和第四页.
这来自jQuery Mobile文档:http: //jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html
重要的是要注意,如果从通过Ajax加载的移动页面链接到具有多个内部页面的页面,则需要在链接中添加rel ="external"或data-ajax ="false".这告诉框架执行整页重新加载以清除URL中的Ajax哈希.这很关键,因为Ajax页面使用散列(#)来跟踪Ajax历史记录,而多个内部页面使用散列来指示内部页面,因此会发生冲突.
| 归档时间： |
|
| 查看次数： |
12113 次 |
| 最近记录： |