PhoneGap jQuery手機多個html文件css不工作

我已經實施了一個手機差距應用程序使用jQuery Mobile和Java腳本 iPhone和機器人。PhoneGap jQuery手機多個html文件css不工作

我的應用程序已接近完成。

直到現在我用單index.html文件的所有頁。

現在我需要使用different html files for different pages.

所以我已經創建了不同的頁面多個外部HTML文件，鏈接引用和到www文件夾中添加他們。

，該

我有一個列表中查看它的CSS不visable

enter image description here

主頁： -見page2和page3裁判在的index.html文件

<div data-role="content"> 
    <ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view"> 
     <li data-role='list-divider' ><big>Lis view</big></li> 
     <li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li> 
     <li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li> 
     <li><a href='page3.html' rel="external" id='pagethreeid' data-panel='main'>Go to Page 3</a></li>        </ul> 
</div>

第2頁： -

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

      <meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 

      <!-- 
      <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /> 
      <link rel="stylesheet" href="inc/jquery.mobile.splitview.css" /> 
      <link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" /> 
      <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /> 
      --> 
      <link rel="stylesheet" href="inc/jquery.alerts.css" /> 
      <link rel="stylesheet" href="inc/jquery.mobile.datebox.css" /> 
      <script charset="utf-8" src="cordova-1.9.0.js"></script> 
      <script type="text/javascript" src="inc/jquery-1.7.1.js"></script> 
      <script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script> 


      <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script> 
      <script type="text/javascript" src="inc/jquery.alerts.js"></script> 
      <script type="text/javascript" src="inc/iscroll-wrapper.js"></script> 

      <script type="text/javascript" src="inc/iscroll-lite.js"></script> 

      <script type="text/javascript"> 
          alert('js Loadfed'); 
       </script> 

      <style> 
       alert(); 
       alert('css loaded'); 

       </style> 

    </head> 

    <body> 


      <!--============= Page2 ===============---> 
      <div data-role="page" id="siteContacts" data-theme="e" > 
       <div data-role="header"> 
        <h1>Page 2 </h1> 
        <a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a> 
       </div> 

        <div data-role="content"> 
         <ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a"> 

           <li data-role="list-divider"> <!--list Header ---> 
            <div class="ui-grid-c"> <!--Section Headers Grid---> 
             <div class="ui-block-a" ><big> aaaa</big> </div> 
             <div class="ui-block-b" ><big> bbbb</big> </div> 
             <div class="ui-block-c" ><big> ccc</big> </div> 
             <div class="ui-block-d" ><big> e-sss</big> </div> 
            </div> 

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




    </body> 
    </html>

來源

2012-07-25 user1425472

也許我讀你的代碼錯誤，但它看起來像鏈接到jQuery Mobile的樣式表被註釋掉。您一定需要在HTML中定義它們以獲取應用的樣式。

您是否將它們加載到其他地方，它從您發佈的代碼中看不到它？

來源

2012-07-25 16:02:17 user1452076

PhoneGap要求您在根目錄的「config.xml」文件中手動設置/允許應用程序的各個方面。

你正在尋找，我相信該解決方案，是這一行：

<access origin="http://code.jquery.com" subdomains="true" />

您允許訪問的「http://code.jquery.com」的外部資源，並允許其所有子域。這意味着，你剛纔已解鎖jQuery Mobile的，這是你要的是什麼，因爲看到你的腳本標籤：

<script type="text/javascript" src="inc/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script> 
這些「SRC」屬性現在被視爲http://code.jquery.com「子域」，這你剛剛成功允許！

來源

2013-06-27 20:53:13 theHopper

PhoneGap jQuery手機多個html文件css不工作

回答

相關問題