旅游日志的Demo

最新推荐文章于 2024-04-29 17:54:33 发布
andli0726
最新推荐文章于 2024-04-29 17:54:33 发布
阅读量89
点赞数
分类专栏： PhoneGap 文章标签： javascript ViewUI
本文链接：https://blog.csdn.net/u013682049/article/details/84240037
版权
PhoneGap 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!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>
andli0726
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旅游日志的Demo

&lt;!DOCTYPE html&gt; &lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, maximum-scale=1, u
复制链接

扫一扫