我正在尝试用jQuery Mobile/PhoneGap编写移动应用程序.我正在使用此示例模板开始,它使用HTML/JS来创建页面.他没有将所有<page>标签放在一个单独的html文件中,而是将其拆分,以便更容易编辑.
由于每个页面都有一个单独的文件,包含标题页眉/页脚的最佳方法是什么?我只看到你需要将整个页脚 - >导航栏代码复制并粘贴到每个HTML页面的位置.这似乎不应该是.例如,如果要更改一个菜单项,则需要进入每个页面并进行更改.
我缺少什么解决方案?
也许我只是不理解jQuery Mobile.例如,他们用于文档的侧边栏 - 侧边栏代码是否复制并粘贴到每个页面上?这没有意义.这与我在这里询问有关页脚的问题是一样的.
http://jquerymobile.com/test/docs/pages/page-cache.html
这就是我所拥有的那些似乎不对(并且$.live('pageinit')不起作用).这个HTML是每个HTML页面上的内容:
<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;">
Run Code Online (Sandbox Code Playgroud)
和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>');
}
Run Code Online (Sandbox Code Playgroud)