<!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 onorientationchange="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>
分享到：
相关推荐
户外旅游小程序是一个为户外旅游爱好者提供旅游攻略、旅游景点、旅游活动等信息的平台。以下是一个户外旅游小程序的几个功能 首页模块：展示一些精选的旅游景点、旅游攻略和旅游活动等信息，供用户浏览和参考。 ...
"Demo"可能包含了对这些数据结构的操作演示，例如，它可能通过动画或日志的形式展示栈操作时元素的变化，或者通过图形界面显示树的遍历过程。这样的可视化工具对于初学者来说极其有用，因为它们能直观地呈现算法执行...
1、作为本人毕业设计开发的一款旅行APP，实现了景点路线展示、订单提交、热门景点点评、旅游日志分享和用户管理等功能。整个项目由于是一个人做的，所以后台使用wamp的集成开发环境，结合ThinkPHP框架以简化开发，...
更新日志和新功能您可以在 找到每个版本的所有更改列表。服务器要求建议使用 PHP 5.4 或更高版本。 它应该也适用于 5.2.4，但我们强烈建议您不要运行此类旧版本的 PHP，因为存在潜在的安全和性能问题，以及缺少的...
6. **错误处理与日志记录**：理解如何优雅地处理程序错误，记录和分析系统日志。 7. **单元测试与集成测试**：通过JUnit、Mocha等工具进行代码测试，确保系统功能的正确性。 8. **版本控制**：使用Git进行版本控制...
在Databricks中，我们还可以利用Delta的高级功能，如时间旅行（Time Travel）来访问历史版本的数据，以及检查点（Checkpoints）来提高数据恢复的可靠性。此外，Delta支持数据湖治理，包括元数据管理、权限控制和审计...
12. **日志管理**：使用Log4j或Logback记录应用程序日志，便于调试和问题排查。 以上只是基于常见Java开发实践的一些推测，具体项目可能涉及更多的技术栈，如前端框架Angular、React或Vue.js，以及后端服务间的通信...
可预测的状态管理单向数据流允许更改日志记录和时间旅行调试。 下一代JavaScript 使用模板字符串，对象解构，箭头函数，JSX语法等。 下一代CSS 编写与组件位于同一位置的可组合CSS，以实现完整的模块化。 唯一的...
11. **错误处理与调试**：良好的错误处理机制是必不可少的，包括捕获和报告异常，以及提供方便的调试工具和日志系统。 通过以上技术，我们可以构建一个完全由JavaScript驱动的流程图设计工具，提供高度定制和灵活的...
8. **故障排查与日志分析**：了解如何阅读和解析ArcGIS Server的日志文件，以便在遇到问题时快速定位和解决问题。 通过深入学习和实践这些知识点，开发者可以构建出高效、交互性强的GIS应用程序，满足不同行业的...
2. 地理定位：如果照片包含GPS信息，exif-js可以帮助提取经纬度，用于在地图上标记照片拍摄位置，创建旅行日志或者图片分享平台。 3. 设备信息：通过读取相机型号等信息，可以展示设备信息，为用户提供更个性化的...
在“Record-Versioning-with-SQL-Server.pdf”和“KB/database/LisRecordVersioning/demo.zip”中，可能包含了更详细的教程和示例代码，帮助你更好地理解和实施SQL Server的版本记录功能。这些资源可能涵盖设置系统...
它支持访问多种主流的网络地图服务，包括但不限于Google Map，使得开发者能够轻松实现基于地图的复杂应用，例如车辆监控系统、旅游景点导航或态势标绘等。 首先，我们来看一下GMap C#.NET的核心组件： 1. **GMap...
这个接口在电商、旅行预订、在线教育等业务领域应用广泛，因为这些行业往往需要快速、高效地处理用户退款请求。 在描述中提到的"即时到账批量退款有密接口调用demo"是一套示例代码，包含了多种编程语言的实现，如...
每一个用户登录操作，系统均会生成日志，让管理一目了然。更多人性设计，请咨询我们的客户经理。 5、视觉颜色管理 独创的视觉颜色管理，根据色彩就可以判断用户性质、订单状态、酒店生效情况。。。将复杂的管理...
4. **新建文本文档.txt**：可能是项目相关的文本说明或日志文件，对于理解示例的背景和目的有一定帮助。 通过阅读和分析这些文件，开发者可以深入理解jQuery 3.4.1的用法，以及如何将其实现到自己的项目中。 总结...
3. **日志系统**：APCAS可能会使用如Log4j或SLF4J这样的日志框架，记录性能数据和异常信息。 4. **测试代码**：单元测试或集成测试，演示了APCAS如何工作并验证其正确性。 5. **文档**：项目文档可能解释了如何配置...