XCode 中的 iPhone jQuery mobile+ PhoneGap .. 带有用于多个视图/页面的多个 html 文件答案

【问题标题】：iPhone jQuery mobile+ PhoneGap in XCode.. with multiple html files for multiple views/pagesXCode 中的 iPhone jQuery mobile+ PhoneGap .. 带有用于多个视图/页面的多个 html 文件
【发布时间】：2012-06-15 04:43:39
【问题描述】：

到目前为止，我开发了一个app with jquery mobile in phonegap.

它有多个视图/页面。

如何使用 jQuery mobile 加载多个页面

【问题讨论】：

标签： iphone ios xcode jquery-mobile cordova

【解决方案1】：

以下 sn-ps 显示了如何加载不同的页面：

<a href="#page2" data-role="button">Go to Page2</a> <!-- for page2 in same html -->   
<a href="page2.html" data-role="button">Go to Page2</a> <!-- redirect to different html -->

或

$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file

我在 Github 中有一个示例 Android Phonegap application，其中包含两个带有两个页面的 html 文件并将它们连接在一起。

虽然它使用的是 Android，但 /www 文件结构对于 iOS XCode 项目也将保持不变。因此，您可以复制该文件夹并在 xcode 中运行它。我已经使用 Cordova 1.7.1 在 XCode 上测试了设置。

【讨论】：

【解决方案2】：

您应该在首先加载的第一页中添加所有 javascripts 和 css 文件；;

ex：我的app第一页是index.html；

<!DOCTYPE html>
<html>
  <head>
  <title></title>

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />     

       <link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />  

       <link rel="stylesheet" href="css/jqm-docs.css" />

      <link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" /> 
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" /> 



    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />    
    <!--
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />       

    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->


  </head>
  <body>
      <div data-role="page" id="indexPage"  > 
          <div data-role="header"> 
                <a href="#" id="btnExit" data-role="button" data-inline="true"  data-icon="back" >Exit</a>
              <h1>Sample App</h1> 
          </div> 
          <div data-role="content">

          </div> 
      </div> 

      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
      <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
       <script type="text/javascript" src="js/iscroll.js"></script>  
      <script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>    
       <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>  
      </script>

      <script type="text/javascript" src="controllers/firstpage.js" ></script>     
      <script type="text/javascript" src="controllers/secondpage.js" ></script>  

       </body>
</html>

第一个页面应该是这样的：

<!DOCTYPE html>
<html>
  <head>
  <title></title>

  </head>
  <body>

      <div data-role="page" id="firstpage" > 

          <div data-role="header" data-inline="true"> 
              <a href="#"  data-role="button" data-inline="true" id="btnLogOut"  data-icon="back" >Log out</a>


          </div> 


          <div data-role="content" data-content-theme="a"  style="width:97%;">

           the first page

          </div>                   
        <div data-role="footer" data-position="fixed">
              <div data-role="navbar">
                      <ul style='background-color:#313439'>

                      </ul>           
             </div> 
        </div>
      </div> 


  </body>
</html>

还有 firstpage.cs

$( document ).delegate("#firstpage" ,"pageinit", function() {

              /// add your code here                        
});

【讨论】：