Javascript PhoneGap jQuery mobile多个html文件css不工作
我已经为iPhone和android使用jQuery Mobile和java脚本实现了一个Phone Gap应用程序 我的应用程序几乎完成了 到目前为止,我对所有页面都使用了single index.html文件 现在我需要为不同的页面使用不同的html文件。 因此,我为不同的页面创建了多个外部html文件,链接了引用并将它们添加到www文件夹中 因为我有一个列表视图,它的css不可见 主页:-请参见index.html文件中的Javascript PhoneGap jQuery mobile多个html文件css不工作,javascript,android,html,jquery-mobile,cordova,Javascript,Android,Html,Jquery Mobile,Cordova,我已经为iPhone和android使用jQuery Mobile和java脚本实现了一个Phone Gap应用程序 我的应用程序几乎完成了 到目前为止,我对所有页面都使用了single index.html文件 现在我需要为不同的页面使用不同的html文件。 因此,我为不同的页面创建了多个外部html文件,链接了引用并将它们添加到www文件夹中 因为我有一个列表视图,它的css不可见 主页:-请参见index.html文件中的page2和page3参考 <div data-role="
page2
和page3
参考
<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>
- Lis视图
第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>
多htmls
警报('js Loadfed');
警惕();
警报(“css加载”);
第2页
-
aaaa
bbbb
ccc
e-sss
也许我读错了你的代码,但是看起来jquery手机样式表的链接被注释掉了。您肯定需要在HTML中定义它们才能应用样式
您是否将其加载到其他地方,而您发布的代码中没有显示这些内容?PhoneGap要求您在根目录的“config.xml”文件中手动设置/允许应用程序的某些方面 我相信,您正在寻找的解决方案是:
<access origin="http://code.jquery.com" subdomains="true" />
”并允许其所有子域。这意味着您刚刚解锁了jquery mobile,这正是您想要的,如您的脚本标记所示:
这些“src”属性现在被视为的“子域”,您刚刚成功地允许了它
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>