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

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

转载作者：行者123 更新时间：2023-11-30 17:20:14

我正在开发一个基于 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 应用程序应该打包为智能手机的 native 应用程序，因此 php 不是一个选项。

最佳答案

感谢 Omar 上面的评论和他对 this question 的回答我能够想出一个可行的解决方案。

1.) 使用 $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html"); 将外部页面添加到 DOM

2.) 通过向文档添加监听器(即 $(document).on( "pagecontainerload", function( event, ui ) { //... } ); )导航到新加载的页面

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

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>

关于javascript - jQuery mobile - 将页面拆分为不同的文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25265336/