我有一个 html 页面,我正在使用 jquery mobile 来创建一个具有多个具有 data-role="page" 属性的 div 的 Web 应用程序。每个页面都有一个固定的页眉和页脚,通过页面转换保持一致。
但是,我想将另一个不是在 jquery-mobile 框架中构建但在同一目录中的 html 页面加载到 DOM 中,并在该页面上显示持久的、固定的页眉和页脚。
这可能吗?我查看了使用 $mobile.changePage() 和 $mobile.loadPage() 的 jquery Mobile 文档,但并不清楚如何实现它。
到目前为止,我有这个(根据@Jack 的说明进行编辑):
HTML
<div data-role="page" id="dog_bars">
<div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
<h1>Dog About Town</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
<h2>303 Bar & Grill</h2>
<p>303 W. Davis St., Dallas</p>
</a></li>
</ul>
</div>
<div data-role="footer" data-id="bestFooter" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
<li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>
</ul>
</nav>
</div><!-- end footer -->
</div>
<!-- page to be loaded into -->
<div data-role="page" class="content_page" id="external_page">
<div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
<h1>Casual Dining</h1>
</div><!-- end header -->
<section data-role="content" class="content" id="external">
</section>
<div data-role="footer" data-id="bestFooter" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
<li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>
<li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>
</ul>
</nav>
</div><!-- end footer -->
</div><!--end page-->
jQuery
$(document).on('pageinit'(function() {
$("#external").load("external_page.html").trigger("create");
}));
目前,单击该链接可以很好地加载带有页眉和页脚的#external_page,但不会加载external_page.html 的内容。#external_page 的部分仍然是空的。
想法?