1

今まで私はapp with jquery mobile in phonegap.

複数のビュー/ページがあります。

jQuery モバイルを使用して複数のページを読み込む方法

4

2 に答える 2

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 アプリケーションを持っています。これには 2 つのページを持つ 2 つの html ファイルが含まれており、それらを接続しています。

Android を使用していますが、/wwwファイル構造は iOS XCode プロジェクトでも同じままです。したがって、フォルダーをコピーして、xcode で同じように実行できます。Cordova 1.7.1 を使用して XCode でセットアップをテストしました。

于 2012-06-12T10:12:23.493 に答える
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>

最初のページは次のようになります。

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

$( ドキュメント ).delegate("#firstpage" ,"pageinit", function() {

              /// add your code here                        
});
于 2012-06-12T10:13:22.253 に答える