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

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

javascript jquery html jquery-mobile

Javascript jQuery mobile-将页面拆分为不同的文件,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我正在开发一个基于jQuery和jQuery mobile的web应用程序。我想显示不同的页面，但由于相应的html标记可能会变得相当大，我想将html拆分为不同的文件，即： <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.m

我正在开发一个基于jQuery和jQuery mobile的web应用程序。我想显示不同的页面，但由于相应的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>


你好，世界

在标记显示为

的地方，我可以如何导入标记？有没有办法做到这一点

我试着使用

$（#page1”）.load（“page1.html”）但这会把整个页面弄乱！由于该web应用程序应打包为智能手机的本机应用程序，因此php不是一个选项。
多亏了奥马尔的上述评论和他对我的回答，我才能够想出一个可行的解决方案
1.）使用$.mobile.pageContainer.pageContainer（“load”、“.html”）向DOM添加外部页面
2.）通过向文档添加侦听器（即$（文档）导航到新加载的页面。在（“pagecontainerload”，function（event，ui）{//…}）；
）
3.）通过向页面的div
-标记添加data DOM cache=“true”
，确保外部ressource保留在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>

<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>

<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>


你好，jqm
$（文档）.ready（函数（）{
$（文档）.on（“pagecontainerload”，函数（事件，ui）{
log（'导航到第1页…'）；
$.mobile.pageContainer.pageContainer（“更改”，“第1页”）；
log（'navigating done！'）；
} );
log（'LoadingPageContainers…'）；
$.mobile.pageContainer.pageContainer（“加载”，“page1.html”）；
$.mobile.pageContainer.pageContainer（“加载”，“page2.html”）；
log（'pagecontainer-load-done！'）；
});

page1.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>

<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>

<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>


第1页

page2.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>

<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>

<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>


第2页
如果加载外部页面，jQM将仅获取第一页div.load（）
不是要在jQM中使用的，相反，如果您使用的是jQM 1.4Does pagecontainer（“load”，“page.html”），请使用.pagecontainer（“load”，“page.html”）替换整个
-段吗？或者它必须在内部（如我上面的问题所述）？不，它不替换任何页面，而是将页面插入DOM。我简直无法让它工作。你介意发布一个工作示例作为答案吗？我不太确定我们是否要将pagecontainer方法（在div内部或外部）等。。。。我也无法通过谷歌找到一个好的例子