Luk*_*een 61 jquery footer jquery-mobile cordova
我正在尝试用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;">
和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>');
}
ost*_*oon 22
我一直试图解决这个问题几天,我已经非常接近解决方案了.我使用以下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加载菜单/内容:
$(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');和.navbar();是保持JQM造型正确所需的方法,但是,还是有一个小虫子.菜单的位置(使用css top:... px设置)有时不正确,并在第一次点击后将其自身移动到正确的位置.真的很近!
编辑:通过设置#footer到position: fixed;我上面提到消失的小错误.此外,很容易制作一个方法来计算top(由px)表示由JQM #footer引起的位置top是否不正确.
| 归档时间： |
|
| 查看次数： |
20594 次 |
| 最近记录： |