PhoneGap jQuery移动多个HTML文件CSS无法正常工作

Question

I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android. 我已经使用jQuery Mobile和适用于iPhone和android的Java脚本实现了Phone Gap应用程序 。

My app is almost completed. 我的应用程序即将完成。

Till now I used single index.html file for all the pages . 到目前为止，我对所有页面都使用了单个index.html文件 。

Now I need to use different html files for different pages. 现在，我需要different html files for different pages.使用different html files for different pages.

So I have created multiple external html files for different pages, linked the references and added them in to www folder. 因此，我为不同的页面创建了多个外部html文件 ，链接了引用并将它们添加到www文件夹中。

in that the i have a list view its css not visable 因为我有一个列表视图，它的css不可见

在此处输入图片说明

Main Page:- See page2 and page3 ref in index.html file 主页：-请参阅index.html文件中的page2和page3 ref

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

Page2:- 第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>

Answer 1

Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. 也许我读错了您的代码，但看来jquery移动样式表的链接已被注释掉。 You definitely need to have them defined in the HTML to get the styles applied. 您绝对需要在HTML中定义它们才能应用样式。

Are you loading them someplace else that it not apparent from the code you posted? 您是否正在其他地方加载它们，而这些地方从您发布的代码中看不出来？

Answer 2

PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory. PhoneGap要求您在根目录的“ config.xml”文件中手动设置/允许应用程序的各个方面。

The solution you are looking for, I believe, is this line: 我相信您正在寻找的解决方案是：

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

You are allowing access to the external resource of " http://code.jquery.com " and allowing all of its subdomains. 您允许访问“ http://code.jquery.com ”的外部资源，并允许其所有子域。 This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags: 这意味着您刚刚解锁了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> 
These "src" attributes are now seen as "subdomains" of http://code.jquery.com , which you have just successfully allowed! 这些“ src”属性现在被视为http://code.jquery.com的 “子域”，您已经成功允许该属性！

PhoneGap jQuery移动多个HTML文件CSS无法正常工作

问题描述

2 个解决方案

解决方案1
1 2012-07-25 16:02:17

解决方案2
0 2013-06-27 20:53:13

PhoneGap jQuery移动多个HTML文件CSS无法正常工作

问题描述

2 个解决方案

解决方案1 1 2012-07-25 16:02:17

解决方案2 0 2013-06-27 20:53:13

解决方案1
1 2012-07-25 16:02:17

解决方案2
0 2013-06-27 20:53:13