jQuery Mobile - 包含来自外部文件的页脚 [英] jQuery Mobile - Include Footer from External File
问题描述
我想创建一个共享页脚(例如,footer.html),我的 jQuery Mobile 应用程序中的所有页面都可以使用该页脚.但是,从外部文件加载 html 后,我找不到让 jQuery 刷新页脚导航栏中样式的方法.之后的想法将不胜感激.
页脚.html:
Index.html:
<div data-role="header"><div class="homebutton" onclick="location.href='default.html'"> </div><h1>事件日历<div data-role="内容"><p>这是一个单页样板模板,您可以复制它来首先构建您jQuery 移动页面.这里的每个链接或表单都将通过 Ajax 拉入一个新页面以支持动画页面转换.</p>
<div data-role="footer" class="CSO" data-position="fixed" id="footerDiv">
<脚本>$('#index').live('pageinit', function (event, ui) {$('#footerDiv').load('Shared/Footer.html');[一些刷新页脚的代码,以便它被 Jquery Mobile 重绘]});
假设其余代码有效:
$('#footerDiv').load('Shared/Footer.html').trigger("create");
I would like to create a shared footer (e.g. footer.html) that can be used by all of the pages in my jQuery Mobile application. However, I cannot find a way to get jQuery to refresh the styles in the footer navbar after loading the html from the external file. After thoughts would be greatly appreciated.
Footer.html:
<div data-role="navbar" class="CSS" data-grid="d" id="footerNav">
<ul >
<li ><a href="#" id="a" data-icon="custom"><div>a</div></a></li>
<li ><a href="#" id="b" data-icon="custom"><div>b</div></a></li>
<li ><a href="#" id="c" data-icon="custom"><div>c</div></a></li>
<li ><a href="#" id="d" data-icon="custom"><div>d</div></a></li>
<li ><a href="#" id="e" data-icon="custom"><div>e</div></a></li>
</ul>
</div>
Index.html:
<div data-role="page" style="position: relative" data-theme="a" id="index">
<div data-role="header">
<div class="homebutton" onclick="location.href='default.html'">
</div>
<h1>
EVENT CALENDAR</h1>
</div>
<div data-role="content">
<p>
This is a single page boilerplate template that you can copy to build you first
jQuery Mobile page. Each link or form from here will pull a new page in via Ajax
to support the animated page transitions.</p>
</div>
<div data-role="footer" class="CSO" data-position="fixed" id="footerDiv">
</div>
<script>
$('#index').live('pageinit', function (event, ui) {
$('#footerDiv').load('Shared/Footer.html');
[Some code to refresh the footer so it gets redrawn by Jquery Mobile]
});
</script>
Assuming that the rest of the code is valid:
$('#footerDiv').load('Shared/Footer.html').trigger("create");
这篇关于jQuery Mobile - 包含来自外部文件的页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!