gpt4 book ai didi

jquery - 在 jQuery Mobile 和 PhoneGap 中创建模板/持久页眉/页脚模板

转载 作者:行者123 更新时间:2023-12-03 21:25:12 28 4
gpt4 key购买 nike

我正在深入使用 jQuery Mobile/PhoneGap 编写移动应用程序。我正在使用this sample template首先,它使用 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>');
}

最佳答案

几天来我一直在尝试解决这个问题,并且已经非常接近解决方案了。我使用以下 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 值引起的位置为JQM 不正确。

关于jquery - 在 jQuery Mobile 和 PhoneGap 中创建模板/持久页眉/页脚模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9152446/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com