导航到JQuery Mobile中div标记内的页面 [英] Navigate to page that is inside div tag in JQuery Mobile
问题描述
下面是包含3页的J Query-Mobile单页结构，第一页是body标签的直接子级，而其他两页是body标签的主要子级，因此当DOM浏览器中的页面加载现在显示第一页时，我想链接其他页面与主页面，但它们无法显示，并且如果删除第二和第三页面的父div，则工作正常，但我想将这些页面放入单独的div中，其我的应用程序要求是否有任何可能的方法叫这些页面
Following are the J Query-Mobile single page structure containing 3 pages first page is immediate child of body tag while other two pages are grand child of body tag so when page load in DOM browser shows the first page now I want to link other pages with main page but they can't show and if remove the parent div of 2nd and 3rd page then works fine but i want to place these page into separate div its my app requirement is there any possible way to call these pages
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<a data-role="button">SubPage1</a> <!--<a href="#subPage1" data-role="button">SubPage1</a> I write this but not show other page what value should href have -->
</div>
</div>
<div>
<div data-role="page" id="subPage1">
<div data-role="content">
<a href="#subPage2" data-role="button">SubPage2</a>
</div>
</div>
<div data-role="page" id="subPage2">
<div data-role="content">
<a data-role="button">Main Page</a>
</div>
</div>
</div>
</body>
推荐答案
jQuery Mobile 1.2-1.3
更新
为获得更好的结果，请在更改页面之前更新$.mobile.pageContainer的值.
$.mobile.pageContainer = $("#ContainerID"); /* New pageContainer */
$.mobile.changePage("#pageID"); /* New pageContainer */
$.mobile.pageContainer = $("body"); /* Default pageContainer */
$.mobile.changePage("#pageID"); /* Default pageContainer */
$.mobile.UrlHistory将被更新，因此data-rel=back将处理pageContainer更改.
$.mobile.UrlHistory will be updated, so data-rel=back will handle pageContainer changes.
可容纳所有页面(直接子级)的默认pageContainer是$("body").其他任何未定义的div从pageContainer中排除.但是，可以将pageContainer设置为任何其他值，无论是初始化前全局还是初始化后的任何时间.
The default pageContainer that accommodates all pages (direct children) is $("body"). Any other undefined divs are excluded from pageContainer. However, pageContainer can be set to any other value, either Globally before initialization or anytime after initialization.
但是，这将需要 $.mobile.changePage() 函数在不同容器，然后在该函数中重新定义pageContainer选项.
However, this will require $.mobile.changePage() function to switch between different containers, and re-define pageContainer option in that function.
给div包裹其他页面的div，因为它将在$.mobile.changePage()函数中使用.将click绑定到您要带您进入子页面的按钮，并以编程方式更改页面.
Give the div that wrapping other pages an id as it will be used in $.mobile.changePage() function. Bind click to the button you want to take you to subpages and change page programmatically.
$.mobile.changePage("#subPage1", { pageContainer: $("#subContainer") });
然后
event.preventDefault()
避免页面闪烁.
<body>
<div data-role="page" id="mainPage">
</div>
<!-- container -->
<div id="subContainer">
<div data-role="page" id="subPage1">
<div data-role="page" id="subPage2">
</div>
</div>
</body>
Demo
这篇关于导航到JQuery Mobile中div标记内的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
