如何使用jquery mobile和phonegap將html文件加載到data-role = page中？

我想要：使用jquery mobile和phonegap將html文件加載到data-role = page中：我的項目有許多帶獨立頁面的小型HTML文件。如何使用jquery mobile和phonegap將html文件加載到data-role = page中？

我用：

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title> 
      Inicio :: Autenticacion 
     </title> 
     <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1"> 
     <link rel="stylesheet" href="jsmobile/jquery.mobile-1.2.0.min.css" type="text/css"> 
     <script src="jsmobile/jquery.js" type="text/javascript"></script> 
     <script src="jsmobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
     <script language="javascript" type="text/javascript"> 


$(document).ready(function() { 
    $('#boton').bind('click', function(event) { 
    $.mobile.loadPage("Fichero/index.html",{pageContainer:$("#container1")}); 

    }); 
}); 

     </script> 
    </head> 
    <body> 
     <div data-role="page" id="container0"> 
      <div data-role="content"> 
     <a id="boton" >Change Page</a> 
      </div> 
     </div> 


     <div id="container1"> 
     </div> 

    </body> 
</html>

文件：Fichero/index.html的

<div date-role="page" id="micro"> 
    <div data-role="header" > 
     <h1>Test Heas</h1> 
    </div><!-- /header --> 
    <div data-role="content" > 
    Test here.. 
    </div><!-- /content --> 
    </div>

，我想在container1 Fichero/index.html的HTML內容加載當用戶點擊更改頁面鏈接時，但它不起作用。

它將內容加載到DIV id =「container1」和DOM中，但沒有顯示/ refresed（就像隱藏）。

什麼是做一個簡單的HTML文件外部加載和DOM刷新和可見的HTML代碼加載的方法是什麼？

在此先感謝。

來源

2013-01-08 ManuParra

您的html與jquery mobile所需的結構不匹配，因此您無法看到任何內容。

任何HTML應該是可見的需求是數據角色裏面=「內容」分區，數據角色裏面=「頁面」分區

如果你只是想加載外部HTML只是做一個AJAX調用（但我認爲正確的jQuery Mobile的方式是在視圖過渡的較好例：？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title> Inicio :: Autenticacion </title> 
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#boton').bind('click', function(event) { 
       $.get('Fichero/index.html').success(function(html) { 
        $('#container1').html(html); 
       }); 

      }); 
     }); 

    </script> 
</head> 
<body> 
    <div data-role="page" id="container0"> 
     <div data-role="content"> 
      <a id="boton" >Change Page</a> 

      <!-- 
      Place the Container here because 
      jQuery Mobile data-role="page" defines a browser fullscreen page 
      (the dataroles are rules for formating a page and there can be only one visible page) 
      --> 
      <div id="container1"></div> 
     </div> 
    </div> 

</body>

來源

2013-01-09 00:01:56 Bernhard

我們可以加載任何外部部分HTML頁面 –

是如果你只需要出的部分。您的外部頁面會在客戶端上提取該部分阿賈克斯電話完成後側面 – Bernhard

如何提取？這是個問題。我們可以在** InAppBrowser **中打開部分HTML頁面嗎？ –

如何使用jquery mobile和phonegap將html文件加載到data-role = page中？

回答

相關問題