动态插入的页眉和页脚不出现 [英] Dynamically inserted header and footer don't appear
问题描述
大家好，我有一个问题...
Hello guys I have one question...
我使用JQM 1.4 ...，有时会发生以下情况，当我单击按钮时，将重定向到(新的HTML5文件)...在新页面上，页眉和页脚没有样式...它没有不会经常发生，但我无法拥有这样的页面...
I use JQM 1.4 ... and it sometimes happens that when i click a button an get reddirected (to a new HTML5 file)... on the new page the header and footer are without style... it doesn't happen always but I cant have a page like this...
对于页脚和页眉，我使用外部HTML文件(header.html和footer.html)，并且我用它们来调用
For the footer and header I use external HTML files (header.html and footer.html) and i call them with
$('#pageprostoriheader').load('header.html').trigger("create");
$('#pageprostorifooter').load('footer.html').trigger("create");
就像我说的那样，这种情况很少发生，但是很难做到……
As I said it doesn't happen very often but when it does is ugly ...
我有一个multiPage模板，我认为这可能是因为页眉和页脚没有足够快地加载....所以它有可能像加载器一样等待直到一切就绪，直到显示页面为止?
I have a multiPage template and i think maybe this is caused because the header and footer don't get loaded quick enough .... so its possible to make like a loader that waits till is everything ready till it shows the page ?
推荐答案
从jQuery Mobile 1.4开始，已弃用.trigger("create")，并将在1.5上将其删除.此外，要创建页眉/页脚，您应该使用.trigger("pagecreate")，但是，它也已弃用并且将被删除.
As of jQuery Mobile 1.4, .trigger("create") is deprecated and will be removed on 1.5. Moreover, to create header/footer you should have used .trigger("pagecreate"), however, it is also deprecated and will be removed.
要在父元素上调用的.enhanceWthin()是上述功能的替换.这个问题有几个解决方案
The replacement of the aforementioned functions is .enhanceWthin() to be called on parent element. This issue has several solutuins
-
成功使用
-
增强工具栏.
.toolbar() .load()后，$('#pageprostoriheader').load('header.html', function () {
$(this).toolbar();
});
$('#pageprostorifooter').load('footer.html', function () {
$(this).toolbar();
});
成功完成.load()后，使用
增强工具栏，方法是在活动页面上使用.enhanceWithin() .
Enhance toolbars after successful .load(), using .enhanceWithin() on active page.
$('#pageprostoriheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
$('#pageprostorifooter').load('footer.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
如果在所有页面上都使用相同的工具栏，则建议使用外部工具栏.
If you're using the same toolbars on all pages, I recommend using External toolbars.
在<body>而不是 page div内的<body>中添加页眉和页脚的HTML标记，然后在jQuery Mobile.js之后的 head 中添加以下代码.
Add HTML markup of header and footer in <body> not inside page div, and then add the below code in head after jQuery Mobile.js.
$(function () {
$("[data-role=header], [data-role=footer]").toolbar();
});
这篇关于动态插入的页眉和页脚不出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
