JQuery Mobile，整个网站的一个页脚片段 [英] JQuery Mobile, one footer fragment for whole site
问题描述
我不询问如何获得固定的页脚.
I'm not asking how to get a fixed footer.
我有一个多页和单页结构. 我想知道如何在整个网站上只使用一个html片段.我真的在寻找解决方案，因为我只想在一个地方编辑页脚，并在所有页面中看到修改.
I've a structure with both multi-page and single page. I'd like to know how to use only one html fragment for the whole site. I'm really looking for a solution because I'd like to edit the footer in only one place and see the modification in all pages.
谢谢.
我正在开发要与PhoneGap封装在一起的移动应用程序，因此我正在寻找客户端解决方案.
I'm developing a mobile application to be wrapped with PhoneGap, so I'm looking for client side solutions.
解决方案(通过@maco将解决方案组合在一起，并使其适应我的情况):
SOLUTION (pushing together the solutions by @maco and adapting them to my case):
$(function() {
// load the templates
$('body').append('<div id="module"></div>');
$('#module').load('templates/module.html :jqmData(role="page")',function() {
// save the actual footer and header
var hdhtml = $('#module :jqmData(role="header")').clone();
var fthtml = $('#module :jqmData(role="footer")').clone();
// removes the header/footer
$(':jqmData(role="header")').remove();
$(':jqmData(role="footer")').remove();
// load at the correct place the header/footer
$(':jqmData(role="page")').prepend(hdhtml).append(fthtml).page().trigger('pagecreate');
// delete the temporary div
$($(this).html()).replaceAll(this).attr('id', 'module');
});
// set the class "ui-btn-active" for the active page
$(document).live('pagecreate', function() {
// get the current page
var currentPage = window.location.pathname;
currentPage = currentPage.substring(currentPage.lastIndexOf("/") + 1, currentPage.length).split("&")[0];
// remove the class from the footer
$($.mobile.activePage + ':jqmData(role="footer") li a')
.removeClass('ui-btn-active ui-state-persist');
// add the class to the link that points to the particular href
$($.mobile.activePage + ':jqmData(role="footer") li a[href="' + currentPage + '"]').addClass('ui-btn-active ui-state-persist');
});
});
推荐答案
module.html
module.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>module header</h1>
</div>
<div data-role="footer" class="ui-bar">
<h3>module footer</h3>
</div>
</div>
</body>
</html>
module.js(在所有页面中加载)
module.js (load this in all pages)
function module() {
var fthtml = $('#module :jqmData(role="footer")').clone();
$(':jqmData(role="footer")').remove();
$(':jqmData(role="page")').append(fthtml).page().trigger('pagecreate');
}
$(function(){
$('body').append('<div id="module"></div>');
$('#module').load('YOUR_module.html_PATH :jqmData(role="page")',function(){
$($(this).html()).replaceAll(this).attr('id','module');
module();
});
$(':jqmData(role="page")').live('pageinit',module);
});
YOUR_module.html_PATH (例如"../module.html"，"../module/module.html")
YOUR_module.html_PATH (eg. "../module.html", "../module/module.html")
这篇关于JQuery Mobile，整个网站的一个页脚片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
