クロスプラットフォームフレームワークのphonegapを試していますが、マルチページで問題が発生しています。
私が欲しいのは次のとおりです。
- ページ1：静的コンテンツ
- ページ2：リストビュー
私が使用するコード：
ページ1：index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>Page 1</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="static" data-role="page">
<div data-role="header" data-position="fixed">
<h1 id="header-text">Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<div id="static-content"></div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul class="navbar">
<li><a href="index.html" class="ui-btn-active" data-transition="none">Static</a></li>
<li><a href="list.html" data-transition="none">Listview</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
$('static-content').html('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.');
}
</script>
</body>
およびページ2の場合：list.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>Page 2</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="listview" data-role="page">
<div data-role="header" data-position="fixed">
<h1 id="header-text">Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<div id="list-container">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul class="navbar">
<li><a href="index.html" data-transition="none">Static</a></li>
<li><a href="list.html" class="ui-btn-active" data-transition="none">Listview</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log('deviceready');
}
</script>
</body>
構造を改善するために、コンテンツを異なるファイルに分けたいと思います。jquery mobileが1つのインデックスを使用するようにページを処理する方法は機能しますが、推奨されません...;）
ナビゲーションバーのリンクについて、次の解決策を試しました。
- a href with：rel = "external"
- a href with：data-ajax = "false"
- a href with：rel="external"およびdata-ajax="false"
外部リンクでこれを行うたびに、次のエラーが発生します。
Exception building cordova JS globals: TypeError: Cannot redefine property: connection for key "connection"
Cordova / phonegapフレームワークが2回ロードされるようですが、このリンクを使用するとページの完全なリロードがトリガーされると思いました。したがって、何を2回ロードする必要がありますか？
または、マルチページの使用法について一般的な誤解がありますか？異なるファイルのコンテンツを分離できるようにする必要がありますか？
どんな助けでも本当に素晴らしいでしょう。