JQuery Mobile、多页 HTML5 和通用菜单答案

【问题标题】：JQuery Mobile, mutlipage HTML5 and a common menuJQuery Mobile、多页 HTML5 和通用菜单
【发布时间】：2013-12-23 20:54:26
【问题描述】：

我可能正在考虑这个“老派”，但我错过了什么？

我正在编写一个 HTML5 应用程序并使用 JQuery 移动。在左上角，我有一个菜单按钮，可以滑出菜单面板。伟大的。现在我想要应用程序中的多个页面...理想情况下，我想使用多页 HTML 文件，但我不能使菜单通用，如果我更新菜单，我必须在每个“页面”中编辑它' - 不好。

然后我找到了几个关于$.mobile.loadPage() 的链接，例如this one 和this one，但我什么也做不了。手册页也对我没有帮助，尽管在他们的示例中看起来有一个 iframe - 我也不是很想要。

在下面的示例中，我收到了警报，因此应该已经加载，但内容没有更新，Java 控制台中也没有更新。

我的主页在下面，但是我尝试加载的第二页是带有 html 标签的整页的各种组合，只是要替换的原始内容，然后我找到了一些地方说它必须被包裹在一个页面 div 中，所以这就是我停下来的地方：

<div data-role="page">
    <div data-role="header">
        <h1>MyApp</h1>
    </div>
    <div data-role="content">
        <center>
            <p>This is page 2. <a href='#' onclick="alert('Woooo!'); return false;">Click me</a></p>
        </center>
    </div>
</div>

这是我的演示代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script>
        function handlePageLoaded() {
            $('#loadPage2').on("click",function(){
                $.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
                // Tried these as well:
                //$.mobile.loadPage("pages/page2.php");
                //$('#main_content').load("pages/page2.php");
                alert ("#loadPage2.onClick()");
                return false;
            });
        };
        $(document).ready(handlePageLoaded);
    </script>
    <title>MyApp</title>
  </head>
<body>
    <div data-role="page" id="application">
        <div data-role="panel" id="menu" data-display="overlay">
            <center>
            <a href="#application" data-rel="close" data-role="button" data-inline="true">Close</a><br />
            <a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
            </center>
        </div><!-- /panel -->

        <div data-role="header">
            <h1>MyApp</h1>
            <a href="#menu" data-icon="gear" class="ui-btn-left">Me</a>
        </div>
        <div id="main_content" data-role="content">
            <center>
                <p>This is the landing page.</p>
            </center>
        </div>
        <div data-role="footer"><span class="ui-title" /></div>
    </div>
</body>
</html>

我还研究了使用标准的 HTML5 多页 jquery 移动应用程序并提取菜单组件，在每个页面中编写菜单的轮廓，然后在 PHP 中包含常见的菜单组件，这几乎和我得到的一样接近，但如果我能提供帮助，我宁愿不转换整个页面，但这没什么大不了的，这种方法的主要问题是我需要 PHP 来做包含，我宁愿有一个原生的 HTML5 应用程序可以在任何网络服务器上提供服务。

所以我的问题又来了，我错过了什么？或者我怎样才能改变我的想法来适应这种新奇的东西？

【问题讨论】：

听起来您想要一个应用于每个页面并在用户加载页面时提供的装饰器。对于我的页面，我使用 Sitemesh，但其他人使用 Tiles。请参阅此处发布的问题。 Using Decorators
这看起来不像我想要的。我追求的是一个标准的多页应用程序，只是有一个我不必在每个页面中更新的通用菜单。
即将推出的 JQM 1.4.0（目前为 RC1）将支持页面外的面板。结帐发行说明：jquerymobile.com/blog/2013/10/24/…
有趣，我可能要等到面板上的文档也发布了，将面板移到 RC 页面之外只是在使用时导航到它（即 data-display="overlay" 不是荣幸）。可能又错过了什么。

标签： html jquery-mobile navigation

【解决方案1】：

您可以使用 $.get 来获取公共标头

  $.get('header.html', {}, function(response){ 
   $('div#nav').append(response); 
   });

它将在这个 div 中加载公共标题

 <div id="nav" class="navcontain">    
</div

【讨论】：