サンプルノートアプリケーションを開発しようとしています。divアプリケーションには、オプションを使用して 2 つの要素を持つインデックス ページが含まれていdata-role="page"ます。最初のページには 2 つのボタンがあります。ボタンをクリックすると、divページ遷移をスライドとして使用して他のボタンに移動する必要があります。
ここに私のHTMLコードがあります:
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="css/cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="css/custom-theme.min.css" />
<script type="text/javascript" src="css/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
margin: 0; /* Setting body margins to 0 to have proper positioning of #container div */
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed"
style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
しかし、これをavdで実行しようとすると、データ遷移が単に無視されたようです。logcat では、エラーがスローされます。
"file:///android_asset/www/index.html: Line 15 : ReferenceError: Can't find variable: $"
理由がわからない。何か助けはありますか？