0
iPhone 및 Android 용은 jQuery Mobile 및 java 스크립트 을 사용하여 Phone Gap 응용 프로그램을 구현했습니다.PhoneGap jQuery 모바일 다중 html 파일 CSS가 작동하지 않습니다.
내 앱이 거의 완료되었습니다.
전까지는 모든 페이지에 대해 단일 index.html 파일을 사용했습니다.
는 지금은, different html files for different pages.
그래서 내가 다른 페이지에 대한 여러 외부 HTML 파일을 만든 사용할 필요가 참조를 연결하고 WWW 폴더에서 그들을했다. 그에서
내가 그 CSS는
메인 페이지를 뚜렷한하지보기 목록을 가지고있다 -가 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>