0
샘플 메모 애플리케이션을 개발하려고합니다. 응용 프로그램은 data-role="page" 옵션을 사용하는 두 개의 div 요소가있는 색인 페이지를 포함합니다. 첫 번째 페이지에는 두 개의 버튼이 있습니다. 아무 버튼이나 클릭하면 페이지 전환을 슬라이드로 사용하여 다른 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 {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #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에서이 작업을 실행하려고 할 때 데이터 전환은 단순히 무시처럼 보인다. 는 로그 캣에서는 오류가 발생합니다 :
"file:///android_asset/www/index.html: Line 15 : ReferenceError: Can't find variable: $"
는 이유를 알고하지 마십시오. 어떤 도움이 필요합니까?
jquery가 올바르게 포함되어 있습니까? 브라우저를 열고 그 점에 대해 오류가 없는지 확인하십시오. 자바 스크립트 콘솔에서 jquery 명령을 실행할 수 있는지 확인하십시오. – aharris88