下面是jQuery页面结构,它位于一个页面上. jQuery mobile将每个data-role =’page’视为用户可以浏览的不同页面. 我的项目现在变得非常大,我在同一个.php文件上有10个data-role =’page’页面,我想
我的项目现在变得非常大,我在同一个.php文件上有10个data-role =’page’页面,我想将它们分成10页但仍保留jQuery Mobile提供的功能.我怎样才能做到这一点？
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div><!-- /page -->
</body>
jQuery mobile有两个页面模板.
每个页面都放在一个HTML文件中,就像你的情况一样.它也被称为多页模板.
第二个每1个HTML文件有1页.它被称为多HTML模板.
阅读更多关于他们here.
您需要的是一个多HTML模板.这是一个工作示例：
HTML 1 – index.html：
<!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://img.558idc.com/uploadfile/allimg/210615/213U131P-1.jpg"></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 });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
</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">Javascript change page example</a>
<a href="second.html" data-transition="slide">Direct link button</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
HTML 2 – second.html：
<!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://img.558idc.com/uploadfile/allimg/210615/213U131P-1.jpg"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
还有一件事你需要知道.只有第一个HTML文件可以有多个内部data-role =“page”.每个其他HTML页面内部只能包含1个data-role =“page”.原因在于here.如果您需要更多信息,请给我评论.