jquery mobile pageContainer问题答案

【问题标题】：jquery mobile pageContainer issuesjquery mobile pageContainer问题
【发布时间】：2012-05-08 15:50:57
【问题描述】：

如果我正确阅读以下文档：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

使用 pageContainer 和 role 应该将一个页面的内容替换到我的当前页面中，例如，就好像它是一个保留页眉和页脚但只更改内容的模板。

我正在尝试做一个简单的例子来了解它是如何工作的，但我玩得很开心。

这是我的超级简单示例。

<!DOCTYPE html>
<html>
  <head>
  <title></title>

  <link rel="stylesheet" href="static/css/jquery.mobile-1.1.0.min.css" type="text/css" />   
  <script type="text/javascript" charset="utf-8" src="static/js/jquery-1.7.1.min.js"></script>        
  <script type="text/javascript" charset="utf-8" src="static/js/jquery.mobile-1.1.0.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){
        $.mobile.changePage('page2.html',{
            'pageContainer': $('#content_container'),
            'role':'content'
        });
    });

  </script>
  </head>
  <body >
      <div data-role="page">
          <div data-theme="a" data-role="header">
              <div data-role="navbar" data-iconpos="top">
                  My Header
              </div>
          </div>
          <div id='content_container' data-role="content">
              <p>Page 1 </p>
          </div>
          <div data-theme="a" data-role="footer">
              My Footer
          </div>
      </div>                 
  </body>
</html>

这是第 2 页

<html>
    <body>
        <div data-role="page">
            <p>Page 2</p>
        </div>
    </body>
</html>

加载时，我没有将“第 1 页”替换为“第 2 页”，而是被重定向到一个新的空页面。任何指向我做错了什么的指针都将不胜感激。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

您的 id 中有语法错误：

<div id='#content_container' data-role="content">

将其更改为（删除哈希）：

<div id='content_container' data-role="content">

根据相关问题Open links in div container in JQuery Mobile，changePage() 似乎不适用于将服务器内容加载到页面内的特定容器中。它想改变整个页面。

这行得通：

$(document).ready(function(){
    $("#content_container").load("page2.html");
});

【讨论】：

谢谢，除了文档之外，您知道 jquery mobile 就它所提供的功能而言似乎没有多大意义....可能更好地坚持使用常规 jquery。

【解决方案2】：

这是一种通过 API 完成此操作的方法，不幸的是，直接使用 jquery 的加载并不能保持该方法的元素格式。

$(document).bind('pageload',function(evt,data){ 
     $(document).unbind('pageload');  
     $(data.page).fadeIn(); 
});
$.mobile.loadPage('page2.html',{'pageContainer':$('#content_container')});

【讨论】：

为什么这不适用于changePage？我需要使用 jQuery 集合作为第一个参数。
我相信是因为 pagechange 是用于 changePage 和 pageLoad 用于 loadPage 的事件。我不知道为什么我不能用 changePage 正确地注入页面，但这对我有用。

【解决方案3】：

您需要在第二页添加一个data-role="content" 元素。 changePage() 方法的 pageContainer 选项旨在更改所有页面的容器，而不是特定页面的容器（我从未使用过此选项，但我相信这就是想法）。

如果您执行console.log($.mobile.pageContainer)，您将看到它是body 元素：http://jsfiddle.net/8T35d/。

此选项的目的是允许您创建一个在您调用 changePage() 方法时不会更改的持久 UI。

如果您正在寻找持久的页眉/页脚，请查看文档中的此页面：http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

【讨论】：