jQuery手机 - 将页面分割成不同的文件 [英] jQuery mobile - Splitting up pages to different files
问题描述
我正在开发一个基于jQuery和jQuery mobile的web应用程序。我想显示不同的页面，但由于相应的html标记可能会变得很大，我想将html分成不同的文件，即：
< HTML>
< head>
< meta charset =utf-8/>
< link rel =stylesheettype =text / csshref =css / jquery.mobile-1.4.3.min.css/>
< title> Hello World< / title>
< / head>
< body>
< div data-role =pageid =page1>
<！ - 此处为page1导入标记 - >
< / div>
< div data-role =pageid =page2>
<！ - 此处为page2导入标记 - >
< / div>
< script src =js / libs / jquery-2.1.1.min.js>< / script>
< script src =js / libs / jquery.mobile-1.4.3.min.js>< / script>
< / body>
< / html>
在<！ - - 为页面< x>导入标记 - > ？有没有办法实现这一点？
我尝试使用< script> $（＃page1）。load（page1.html ）;< / script> 但这会混淆整个页面！由于Web应用程序应该打包为智能手机的本机应用程序，所以后面的PHP不是一个选项。 解决方案
感谢上述Omar的评论和他的答案这个问题我能够想出一个工作解决方案。使用 $将外部页面添加到DOM。mobile.pageContainer.pagecontainer（load，< externalResName> .html）;
<2>）通过向文档添加侦听器（例如
3.）通过向页面的 div data-dom-cache =true，确保外部资源保留在DOM中c $ c> -tag。
test.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< link rel =stylesheettype =text / csshref =http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css />
< title>您好jqm< / title>
< / head>
< body>
< script src =http://code.jquery.com/jquery-2.1.1.min.js>< / script>
< script src =http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js>< / script>
< script>
$（document）.ready（function（）{
$（document）.on（pagecontainerload，function（event，ui）{
console.log（'navigate to page1。 ...'）;
$ .mobile.pageContainer.pagecontainer（change，＃page1）;
console.log（'navigating done！'）;
}）;
console.log（'loading pagecontainers ...'）;
$ .mobile.pageContainer.pagecontainer（load，page1.html）;
$ .mobile .pageContainer.pagecontainer（load，page2.html）;
console.log（'pagecontainer-load done！'）;
}）;
< / script>
< / body>
< / html>
page1.html
< div data-role =pageid =page1data-dom-cache =true>
< div data-role =header>
< h1>第1页< / h1>
< / div>
< div role =mainclass =ui-content>
< / div>
< / div>
page2.html
< div data-role =pageid =page2data-dom-cache =true>
< div data-role =header>
< h1>第2页< / h1>
< / div>
< div role =mainclass =ui-content>
< a href =＃page1data-rel =backdata-transition =slideclass =ui-btn ui-corner-all ui-btn-inline>返回页面1·; / A>
< / div>
< / div>
I am developing a web app based on jQuery and jQuery mobile. I want to show different pages, but since the corresponding html-markup might become quite large I would like to split up the html into different files, i.e.:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="page1">
<!-- import markup for page1 here -->
</div>
<div data-role="page" id="page2">
<!-- import markup for page2 here -->
</div>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
</body>
</html>
What can I do to import my markup where it says <!-- import markup for page<x> -->? Is there any way to achieve that?
I tried using <script>$("#page1").load("page1.html");</script> but this messes the entire page up! Since the web app should be packed as a native app for smartphones later php is not an option.
Thanks to Omar's comments above and his answer to this question I was able to come up with a working solution.
1.) Add external pages to the DOM by using $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");
2.) Navigate to the newly loaded page by adding a listener to the document (i.e. $(document).on( "pagecontainerload", function( event, ui ) { //... } );)
3.) Make sure that the external ressource stays in the DOM by adding data-dom-cache="true" to the page's div-tag.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1" data-dom-cache="true">
<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>
page2.html
<div data-role="page" id="page2" data-dom-cache="true">
<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>
这篇关于jQuery手机 - 将页面分割成不同的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
