Question

我有一个页面，其中布局是固定的（即页眉，页脚，导航等）。 Jquery mobile可以很好地通过ajax加载，但它会重新加载整个页面，理想情况下我只想加载内容区域。

我认为在data-role =“page”中添加一个div会告诉jquery要刷新哪个内容区域，但这似乎什么都不做，只是作为历史记录的存储容器。

我在文档中找不到一个属性来设置哪个div应该是容器。可以简单地完成吗？

Answer 1

根据您的想法“......理想情况下，我只想加载内容区域。”创建页面的“最佳实践”是确保您包含页面所需的所有内容以便运行。这意味着它应该包含任何页眉，页脚，并链接到jquery和jquery移动库和资产。有一个很好的理由。

截至发布候选人2（截至撰写本文时为止），系统将使用URL重写来清理地址栏中显示的URL。这样可以更容易地查看源代码，更容易添加书签，并且在刷新的情况下（任何人都可以随时执行，并相信我，他们会这样做）。该页面将从刷新加载到最新页面，而不会加载您认为的初始页面。如果您在上面概述的情况，那将导致页面没有页眉，页脚，导航等。

确保每个页面都可以独立运行也可以确保如果您的用户使用某些公司控制的设备，而安全策略正在强制他们关闭JavaScript，那么他们仍然可以查看该页面的基本格式（不ajax，没有多余的装饰），仍然可以完成他们需要的工作。以这种方式编写页面也使得人们陷入细胞石时代（功能或翻盖手机）实际上可以使用你的页面。在这两种情况下它可能都不是很漂亮，但它会起作用，这是最重要的事情。

Answer 2

您的问题的两个答案：

1）可以在一个HTML页面中加载多个“页面”，这是Web应用程序的理想选择。页面div被分配了一个id，然后您可以在页面之间来回跳转而无需返回服务器。您可以删除其他页面div上的页眉和页脚....或保持相同，不要使用页面转换。

OR 2）使用JQuery来更新div。这也很容易，因为JQuery Mobile已经在其脚本引用中使用了JQuery。

<script> 
function loadcontent() { 
var strNewHtml;
strNewHtml = '<p>My New Text</p>';
$('#my-content-id-name').html(strNewHtml);
}
</script>
 add a link:  <a href = "#" onclick="loadcontent();">Click here</a>

......应该这样做！

jquery mobile保留固定内容并仅加载内容

2 个答案: