0

我有一个带有页眉、内容和页脚的页面。

<div data-role="page" id="home">
 <div data-role="header">
 </div>
 <div data-role="content" id="1">
 </div>
 <div data-role="footer">
 </div>
</div>

现在我想更改另一个页面中的内容部分,并且页眉,页脚也与主页中的另一个页面相同。

<div data-role="page" id="page1">
 <div data-role="header">
 </div>
 <div data-role="content" id="2">
 </div>
 <div data-role="footer">
 </div>
</div>

提前致谢。

更新:

例如:我有一个页面有多个选项,如小提琴http://jsfiddle.net/fCcyc/1/。如果我想点击特定按钮,如如果我点击Bookmark按钮,只有内容将替换更改标题和页脚相同。如果我单击Mapview唯一的内容将更改页眉和页脚相同,并且必须为地图加载 map.js 文件。

4

3 回答 3

4
$('#1').load('another_page.html #2');
于 2013-07-22T08:59:47.137 回答
2

为此,您可以创建不同的页眉和页脚文件。然后创建您的页面并在其中包含页眉和页脚。然后对于内容使用 jQuery 来检查页面是主页还是其他页面。您可以通过以下方式检查网址:

suppose that you have a page with this address: http://sub.domain.com/page.htm. use the following in page code to achive those results:

    window.location.host : you'll get sub.domain.com:8080 or sub.domain.com:80
    window.location.hostname : you'll get sub.domain.com
    window.location.protocol : you'll get http:
    window.location.port : you'll get 8080 or 80
    window.location.origin : you'll get http://sub.domain.com

对于您的情况:

   if(window.location.hostname == "home page url") {

        <div data-role="content" id="1">
        </div>
    } else {
        <div data-role="content" id="2">
       </div>
   }
于 2013-07-22T09:08:00.483 回答
0

您可以使用 AJAX 加载它。如果您一直想使用浏览器历史记录或深度链接,则需要进行一些编程。

要更改内容:

$('#content').load('page.html');
于 2013-07-22T09:01:22.567 回答