JQueryMobile，多页HTML5和一个通用菜单

我可能在想这个"老派"，但我缺少什么？

我正在编写一个HTML5应用程序，并使用JQuery手机。在左上角，我有一个从菜单面板中滑出的菜单按钮。太棒了现在我想要应用程序中的多个页面。。。理想情况下，我想使用多页HTML文件，但我不能使菜单通用，如果我更新菜单，我必须在每个"页面"中编辑它——这不好。

然后我找到了几个关于$.mobile.loadPage()的链接，例如这个和这个，但我什么都做不到。手册页对我也没有帮助，尽管他们的例子中似乎有一个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来执行include，我更希望有一个可以在任何web服务器上提供服务的本地HTML5应用程序。

那么，我的问题又来了，我错过了什么？或者我该如何改变我的想法来适应这种新奇的东西？

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

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

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

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

相关内容

最新更新

热门标签：