Question

我正在开发一个基于jQuery和jQuery mobile的网络应用程序。我想显示不同的页面，但由于相应的html标记可能会变得非常大，我想将html拆分成不同的文件，即：

<html>
    <head>
        <meta charset="utf-8" />            
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />            
        <title>Hello World</title>
    </head>
    <body>
        <div data-role="page" id="page1">
          <!-- import markup for page1 here -->
        </div>

        <div data-role="page" id="page2">
          <!-- import markup for page2 here -->
        </div>

        <script src="js/libs/jquery-2.1.1.min.js"></script>
        <script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
    </body>
</html>

如果要将标记导入，我该怎么办？有没有办法实现这个目标？

我尝试使用<script>$("#page1").load("page1.html");</script>，但这会混淆整个页面！由于Web应用程序应该打包为智能手机的本机应用程序，因此以后不能选择php。

Answer 1

感谢Omar上面的评论以及他对this question的回答，我能够提出一个有效的解决方案。

1。）使用$.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");

将外部页面添加到DOM

2。）通过向文档添加一个监听器（即$(document).on( "pagecontainerload", function( event, ui ) { //... } );）

导航到新加载的页面

3。）通过将data-dom-cache="true"添加到页面的div标记，确保外部资源保留在DOM中。

<强>的test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <title>Hello jqm</title>
    </head>
    <body>  
      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

      <script> 
        $(document).ready(function(){   
          $(document).on( "pagecontainerload", function( event, ui ) {
            console.log('navigating to page1...');
            $.mobile.pageContainer.pagecontainer("change", "#page1");
            console.log('navigating done!');          
          } );

          console.log('loading pagecontainers...');
          $.mobile.pageContainer.pagecontainer("load", "page1.html");
          $.mobile.pageContainer.pagecontainer("load", "page2.html");
          console.log('pagecontainer-load done!');
        });
      </script>    
    </body>
</html>

<强> page1.html

<div data-role="page" id="page1" data-dom-cache="true">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>

<强> page2.html

<div data-role="page" id="page2" data-dom-cache="true">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

jQuery mobile - 将页面拆分为不同的文件

1 个答案: