jquery移动多页在单独的html文件中 [英] jquery mobile multipage in separate html files
问题描述
我有一个不同页面的Jquery Mobile多页
I have a Jquery Mobile multipage with different pages
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("pagebeforeshow", "#mainPage", function(e, data) {
showPageDossiers(filename, selector);
});
//do some initialization stufff
)};
function showPageDossiers(filename, selector) {
// incldue template
$.get(filename, function(template) {
$(selector).html(template);
$(selector).trigger("create");
});
}
</script>
</head>
<body>
<div id="mainPage" data-role="page" data-title="Main">
<!-- in comment, this code in external HTML file
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li><a href="#page2">GOTO Page2 </a> </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
-->
</div>
<div id="page2" data-role="page" data-title="page2">
<div data-role="header"><h2>Page 2</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li><a href="#page3">GOTO page3</a> </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div id="page3" data-role="page" data-title="page23">
<div data-role="header"><h2>Page 3</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li><a href="#mainPage">GOTO mainPage</a> </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
</body>
</html>
我想把代码放在
<div id="pageXX"> .... </div>
在单独的JSP文件中，因为我可能有更多页面。拥有一个主要的
JSP文件使得管理和阅读变得困难。
例如，我对mainPage div的单独内容看起来像
in separate JSP files since I may have more pages. Having all in one main JSP file make it hard to manage and read. For example, my separate content for the mainPage div, will look like
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li><a href="#page2">GOTO Page 2</a> </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
我基本上有一个主页面，其中包含指向第2页的链接，Page2有一个页面指向第3页。和Page3有一个指向MainPage的链接。
I basically had a Main Page that had a link to page 2 and Page2 had a page to Page 3 and Page3 had a link to MainPage.
我用Google搜索，但我发现的唯一内容是链接到外部HTML文件。
I googled but the only things I found is linking to external HTML file.
有谁知道如何将主文件分成单独的文件？
Anyone known how to break the main file into separate files ?
谢谢
更新：带有我现在拥有的完整代码
UPDATE : with a complete code that I had now
推荐答案
使用jquery模板系统:)在事件前的页面上在javascript中你可以包含html文件。
Use the jquery template system :) On the page before event in javascript you can include the html file.
$(document).on("pagebeforeshow", "site_id", function(e, data) {
showPasswordReset();
});
function showPasswordReset() {
// incldue template
$.get("templates/reset_password.html", function(template) {
$("site_id div[data-role='content']").html(template);
$("site_id div[data-role='content']").trigger("create");
});
}
你必须下载 jquery.tmpl.min .js 这将有效。
这篇关于jquery移动多页在单独的html文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
