在jQuery Mobile和PhoneGap中创建模板化/持久化页眉/页脚模板 [英] Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap
问题描述
我正在用jQuery Mobile / PhoneGap写一个移动应用程序。我使用此示例模板从开始，它使用HTML / JS创建页面。不是在一个html文件中拥有所有< page> 标签，而是将其分割，因此更容易编辑。
I'm diving into writing a mobile app with jQuery Mobile/PhoneGap. I'm using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the <page> tags in one single html file, he's got it split up so it's easier to edit.
由于每个页面都有一个单独的文件，因此最好的方法是添加临时的页眉/页脚？我只看到它需要复制和粘贴整个footer-> navbar代码到每个HTML页面。这似乎不应该是。例如，如果要更改一个菜单项，则需要进入每个页面并更改它。
Since I will have a separate file for each page, what's the best way to include the tempated header/footer? I've only seen it where you need to copy and paste the whole footer->navbar code into each HTML page. This doesn't seem like it should be. For example, if you want to change one menu item, you need to go into each page and change it.
我遗漏了什么解决方案？
What's the solution that I'm missing?
也许我只是不了解jQuery Mobile。例如，他们用于他们的文档的侧边栏 - 边栏代码复制并粘贴到每个页面？这没有意义。这是与我在这里要求的页脚的问题相同的想法。
Maybe I'm just not understanding jQuery Mobile. For example, their sidebar they use for their docs - is that sidebar code copy and pasted onto each page? That doesn't make sense. It's the same idea as the question I'm asking here about the footer.
http://jquerymobile.com/test /docs/pages/page-cache.html
这是我得到的，似乎不对（和 $ .live（'pageinit'）不工作）。此HTML是每个HTML页面上的内容：
This is what I've got that doesn't seem right (and $.live('pageinit') isn't working). This HTML is what goes on each HTML page:
<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">
>
And the JS
$.live('pageinit', function (event) {
displayFooter();
});
function displayFooter() {
$('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' +
'<ul>' +
'<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>' +
'<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>' +
'<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>' +
'</ul>' +
'</div>');
}
推荐答案
解决这个问题几天了，我已经真的接近解决方案。我使用以下HTML：
I've been trying to tackle this problem for a few days now and I've gotten really close to the solution. I use the following HTML:
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1 id="title">Title</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<p>Loading...</p>
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed">
<div data-role="navbar" id="navbar">
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
我创建了以下函数来使用ajax加载菜单/内容：
And I've created the following functions to load the menu/content using ajax:
$(document).on('pageinit', "#page", function() {
// for example: displayFooter();
loadContent("main");
loadMenu("default");
});
function loadContent(location) {
return $('#content').load("views/content/"+location+".html", function() {
$(this).trigger('create');
});
}
function loadMenu(location) {
$("#menu").remove();
$("#navbar").remove();
$("#footer").html('<div data-role="navbar" id="navbar">');
$("#navbar").html('<ul id="menu"></ul>');
$("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); });
return true;
}
.trigger（'create'）; / code>和 .navbar（）; 是保持JQM样式正确所需的方法，但是还有一个小错误。菜单的位置（使用css top：... px设置）有时不正确，并在第一次点击后将自身移动到正确的位置。
The .trigger('create'); and .navbar(); are the methods required to keep the JQM styling correct, however, there's still one little bug. The position of the menu (which is set using css top: ...px) is sometimes not correct and moves itself to the correct position after the first tap. Really close though!
编辑：将 #footer 设为 position：fixed; 上面提到的小错误已经消失了。此外，很容易为 #footer 创建一个计算 top （在px中）的方法通过JQM的 top 值不正确。
By setting #footer to position: fixed; the minor bug I mentioned above is gone. Also, it's easy to make a method that calculates the top (in px) for the #footer if the position caused by the top value by JQM is incorrect.
这篇关于在jQuery Mobile和PhoneGap中创建模板化/持久化页眉/页脚模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
