在JQuery Mobile的两个不同文件中浏览三个页面 [英] Navigate between three pages in two different files in JQuery Mobile
问题描述
为什么我无法从second.html导航到其他内部页面＃page3？
我可以从index.html导航到second.html。我的代码如下所示：
index.html页面
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< meta name =viewportcontent =widdiv = device-widdiv，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/>
< title>
< / title>
< link rel =stylesheethref =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（'pagebeforeshow'，#index，function（）{
$（document）.on（'click'，#changePage，function（）{
$ .mobile.changePage（'second.html'，{dataUrl：second.html？paremeter = 123，data：{'paremeter'：'123'}，reloadPage：false，changeHash：true}）;
}）;
}）;
< / script>
< / head>
< body>
<！ - 首页 - >
< div data-role =pageid =index>
< div data-role =header>
< h3>
第一页
< / h3>
< / div>
< div data-role =content>
< a data-role =buttonid =changePage>测试< / a>
< / div> <！ - 内容 - >
< / div><！ - page - >
< / body>
< / html>
second.html页面
<！DOCTYPE html>
< html>
< head>
< / head>
< body>
<！ - 首页 - >
< div data-role =pageid =second>
< script type =text / javascript>
alert（第二页内）;
$（document）.on（'pagebeforeshow'，#second，function（）{
//$(document).ready(function(e）{
var parameters = $ （this）.data（url）。split（？）[1];
parameter = parameters.replace（parameter =，）;
alert（parameter）;
}）;
function move（）{
alert（moving ...）;
$ .mobile.changePage（'＃third'）;
alert（moved !!!）;
}
< / script>
< div data-role =header>
< h3>
第二页
< / h3>
< / div>
< div data-role =content>
< a href =＃thirdonClick =move（）data-role =button>转到属性页< / a>
< / div><< ; - 内容 - >
< / div><！ - 第二页 - >
< div data-role =pageid =第三>
< script type =text / javascript>
alert（Inside Third Page ...）;
< /脚本>
< / div>！ - 第三页 - >
< / body>
< / html>
在second.html页面中还会显示第二条警告消息，但页面导航从不会发生？ 。任何人都可以请让我知道我在这里错过了什么，或者我在这里做错了什么？ 上班。这只是在jQuery Mobile中使用多个HTML模板解决方案的一个缺点。
基本上，如果您决定使用多个HTML页面，只有第一个HTML可以有多个页面，整个页面将被加载到DOM中。
如果使用ajax加载页面（默认页面处理），当第二个html被加载到DOM时，只有第一页
您可以做两件事来解决这个问题：
将被加载，其他页面（包括页面HEAD）将被丢弃。
解决方案1
让您的第三页位于另一个html内，例如 third.html 。
解决方案2
使用ajax禁用页面加载。这将完全加载 second.html ，以便您切换到内部网页。不幸的是，你会失去网页过渡。
最后，如果你想找到更多的看看我的其他答案： 为什么我必须将所有脚本放在jquery mobile的index.htmlWhy can't I navigate from second.html to the other inner page #page3 ?.
I am able to navigate from index.html to second.html. My code is as shown below :
index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<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('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html page
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<script type="text/javascript">
alert("Inside the Second Page");
$(document).on('pagebeforeshow', "#second",function () {
//$(document).ready(function(e) {
var parameters = $(this).data("url").split("?")[1];
parameter = parameters.replace("parameter=","");
alert(parameter);
});
function move(){
alert("moving...");
$.mobile.changePage('#third');
alert("moved !!!");
}
</script>
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
<a href="#third" onClick="move()" data-role="button">Go to Property Page</a>
</div> <!--content-->
</div><!-- second page-->
<div data-role="page" id="third">
<script type="text/javascript">
alert("Inside Third Page...");
</script>
</div>!-- third page-->
</body>
</html>
In second.html page the second alert message is also shown but the page navigation never happens ???. Could anyone please let me know what am I missing here or am I doing something wrong here ?.
Unfortunately this is not going to work. This is simply a downside of using multiple HTML template solution with jQuery Mobile.
Basically if you decide to work with multiple HTML pages only first HTML can have more then 1 page because that whole page will be loaded into the DOM.
If ajax is used to load pages (default page handling), when second html is loaded into the DOM only the first page is going to be loaded, every other pages including the page HEAD will be discarded.
You can do 2 things to fix this problem:
Solution 1
Let your third page be inside an another html, for example third.html.
Solution 2
Disable page loading with ajax. This will fully load second.html so you can switch to inner pages. Unfortunately you will lose page transitions.
In the end, if you want to find more take a look at my other answer: Why I have to put all the script to index.html in jquery mobile
这篇关于在JQuery Mobile的两个不同文件中浏览三个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
