<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="http://tm.arcgisonline.cn:8038/arcgis_js_v27/library/2.7/jsapi/js/esri/dijit/css/PopupMobile.css">
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script src="jquery-mobile/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" src="http://tm.arcgisonline.cn:8038/arcgis_js_v27/library/2.7/jsapicompact/"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/trnotes.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<!--arcgis js api-->
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<!-- <script src="js/phonegap.js" type="text/javascript"></script> -->
<script src="js/cordova-1.5.0.js" type="text/javascript"></script>
<style>
article,footer {
display:block;
}
#home h2{
margin-left:5px;
}
#limit {
margin:0 auto 20px 40px;
}
footer p{
text-align:right;
font-style:italic;
font-size:90%;
margin:5px inherit;
}
#entries{
display:none;
}
#recent {
display:none;
}
#map1 div[data-role=content]{
padding:0;
}
@-webkit-keyframes
pulse
{
0%
{
opacity: 1.0;
-webkit-transform: scale(1.25);
}
45%
{
opacity: .20;
-webkit-transform: scale(.80);
}
100%
{
opacity: 1.0;
-webkit-transform: scale(1.25);
}
}
@-moz-keyframes
pulse
{
0%
{
opacity: 1.0;
-moz-transform: scale(1.25);
}
45%
{
opacity: .20;
-moz-transform: scale(.80);
}
100%
{
opacity: 1.0;
-moz-transform: scale(1.25);
}
}
#map_graphics_layer
{
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: pulse;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: pulse;
}
#map {
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
#myPhoto {
display: none;
width: 100px;
height:100px;
}
.ui-header-fixed {
z-index: 39;
-webkit-transform: translateZ(0);
}
/*.esriPopupMobile .titlePane {
z-index:2000;
background: rgba(69, 72, 77, 1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A4D6A',endColorstr='#639BBC');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A4D6A',\A endColorstr='#639BBC')";
}*/
</style>
</head>
<body onorientatiοnchange="orientationChanged();">
<!--地图home-->
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button" data-inline="true" onClick="doMapZoom(1)"><img src="images/zoomin.png"/></a>
<h1>地图</h1>
<a href="#" data-role="button" data-inline="true" onClick="doMapZoom(-1)"><img src="images/zoomout.png"/></a>
</div>
<div id="mapcontent" data-role="content" style="width:100%; height:100%;padding:0px;">
<div id="map" dojotype="dijit.layout.ContentPane" style="width:100%; height:100%;" ></div>
</div>
<!--底部菜单-->
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#home" data-icon="grid" data-transition="none" class="ui-btn-active">地图</a></li>
<li><a href="#new" data-icon="star" data-transition="none">新日记</a></li>
<li><a href="#travellist" data-icon="gear" data-transition="none">日记列表</a></li>
</ul>
</div>
</div>
</div>
<!--日志列表travellist -->
<div data-role="page" id="travellist">
<div data-role="header" data-position="fixed" data-backbtn="true">
<a href="#" data-role="button" data-inline="true" style="display:none;">Button</a>
<h1>日记列表</h1>
<a href="#" data-role="button" data-inline="true" id="limit">全部</a>
</div>
<div data-role="content">
<ul id="recent" data-role="listview" data-theme="c" data-filter="true" data-inset="true"></ul>
<div id="entries" ></div>
</div>
<!--底部菜单-->
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#home" data-icon="grid" data-transition="none" class="ui-btn-active">地图</a></li>
<li><a href="#new" data-icon="star" data-transition="none">新日记</a></li>
<li><a href="#travellist" data-icon="gear" data-transition="none">日记列表</a></li>
</ul>
</div>
</div>
</div>
<!--新日记new-->
<div data-role="page" id="new">
<div data-role="header" data-position="inline" data-backbtn="false">
<a href="#" data-icon="add" id="btnAddNote">添加</a>
<h1>新日记</h1>
<a href="#" data-icon="check" id="photo">拍照</a>
</div>
<div data-role="content" id="newNote">
<form action="" method="post" name="insert" id="insert" data-ajax="false"><div data-role="fieldcontain">
<label for="title">标题:</label>
<input type="text" name="tetle" id="title" value=""/>
<div data-role="fieldcontain">
<label for="details">内容:</label>
<textarea cols="40" rows="8" name="details" id="details"></textarea>
</div>
</form>
<img id="myPhoto"/>
</div>
<!--底部菜单-->
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#home" data-icon="grid" data-transition="none" class="ui-btn-active">地图</a></li>
<li><a href="#new" data-icon="star" data-transition="none">新日记</a></li>
<li><a href="#travellist" data-icon="gear" data-transition="none">日记列表</a></li>
</ul>
</div>
</div>
</div>
<!--添加日志editNote-->
<div data-role="page" id="editNote">
<div data-role="header">
<h1>更新日记</h1>
</div>
<div data-role="content">
<form action="" method="post" name="edit" id="edit" data-ajax="false">
<div data-role="fieldcontain">
<label for="title2">标题:</label>
<input type="text" name="tetle2" id="title2" value=""/>
</div>
<div data-role="fieldcontain">
<label for="details2">内容:</label>
<textarea cols="40" rows="8" name="details2" id="details2"></textarea>
</div>
<input name="update" type="submit" id="update" value="更新"/>
</form>
</div>
<!--底部菜单-->
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#home" data-icon="grid" data-transition="none" class="ui-btn-active">地图</a></li>
<li><a href="#new" data-icon="star" data-transition="none">新日记</a></li>
<li><a href="#travellist" data-icon="gear" data-transition="none">日记列表</a></li>
</ul>
</div>
</div>
</div>
<!--编辑日志display-->
<div data-role="page" id="display">
<div data-role="header" data-position="inline">
<a href="#" data-role="button" id="editItem">编辑</a>
<h1>日记</h1>
<a href="#" data-role="button" id="delete">删除</a>
</div>
<div data-role="content">
<div style="PADDING: 1px; margin: 5px; height: 200px; overflow: hidden;">
<img id="displayphoto" style="height: 200px; width: 200px;" />
</div>
<div style="PADDING: 1px; margin: 5px; overflow: hidden;">
<article></article>
<footer></footer>
</div>
</div>
<div data-role="footer" data-id="myfooter" data-position="fixed">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#home" data-icon="grid" data-transition="none" class="ui-btn-active">地图</a></li>
<li><a href="#new" data-icon="star" data-transition="none">新日记</a></li>
<li><a href="#travellist" data-icon="gear" data-transition="none">日记列表</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>