1. 首頁
  2. 問答
  3. iPhone jQuery Mobile的+ PhoneGap的XCode中。與多個視圖/

iPhone jQuery Mobile的+ PhoneGap的XCode中。與多個視圖/

2012-06-12 23 views

回答

0

下面演示瞭如何加載不同的頁面：

<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上的設置。

來源

2012-06-12 10:12:23 dhaval

0

你應該在首先加載的第一頁中添加所有javascript和css文件;;

例如：我的應用第一頁是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>

和fisrtpage應該是這樣的：

<!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（ 「＃第一頁」， 「pageinit」，函數（）{

   /// add your code here       
});

來源

2012-06-12 10:13:22

相關問題

 相關問題