JS例子

// JavaScript Document

//mobileinit事件：当Jquery Mobile开始执行时，他就会在document对象上触发mobileinit 事件，所以你可以绑定别的行为来覆盖默认配置
//mobileinit事件是在加载后马上触发
$(document).bind("mobileinit",function(){
	alert("jquerymobile init")
	$.mobile.notesdb=openDatabase("trnotes","1.0","Travel Notes",10*1024*1024);
	
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("CREATE TABLE IF NOT EXISTS notes (" +
				"id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT," +//
				"title TEXT NOT NULL," +//
				"details TEXT NOT NULL," +//
				"entered TEXT NOT NULL," +//
				"updated TEXT," +//
				"latitude REAL," +//
				"longitude REAL," +//
				"photourl TEXT);");
	});
	//$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
	$.mobile.fixedToolbars.setTouchToggleEnabled(false);
	 //$.mobile.showPageLoadingMsg();
});

//pagebeforeshow：转场之前，页面被显示时触发
//pagebeforehide：转场之前，页面被隐藏时触发
//pageshow：转场之后，页面被显示时触发
//pagehide：转场之后，页面被隐藏时触发

//$('div').live('pageshow',function(event, ui){
//	　alert('This page was just hidden: '+ ui.prevPage);
//	});

$(function(){
	$("#home").live("pagebeforeshow",showMapNote);
	$("#new").live("pageshow",getLocation);
	//$("#insert").live("submit",insertEntry);
	//$("#photo").live("click",getPhoto);
	$("#photo").live("tap",getPhoto);
	$("#btnAddNote").live("click",insertEntry);
	$("#travellist").live("pageshow",getTitles);
	$("#editItem").live("click",editItem);
	$("#delete").live("click",deleteItem);
	$("#update").live("click",updateItem);
	$("#limit").live("click",swapList);
	
});




//location
var trNotes={
	lat:39.92,
	lng:116.46,
	limit:20
};


function showMapNote(){
	
	//alert("map page -pagebeforeshow");
	if(!map) return;
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("SELECT * FROM notes ORDER BY id DESC LIMIT ?",[trNotes.limit],
		function(t,result){
			getGraphics(result)
		});
	});
}

function getTitles(){
	var list=$("#recent"),items=[];
	
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("SELECT id,title,details,photourl FROM notes ORDER BY id DESC LIMIT ?",[trNotes.limit],function(t,result){
			var i,len=result.rows.length,row;
			
			if(len>0){
				for(i=0;i<len;i+=1){
					row=result.rows.item(i);
					photo=row.photourl;
					if(!photo)
					  photo="images/nophoto.png";
					content=row.details.substring(0,10);
					items.push("<li><a href='#display' data-trnote='"+row.id+"'><img src="+photo+"/><h3>"+row.title+"</h3><p>"+content+"</p></a></li>");
				}
				list.html(items.join(" "));
				
				list.listview("refresh");
				
				$("a",list).live("click",function(e){
					getItem(($(this).attr("data-trnote")));
				});
				
				$("#entries").show();
				$("#recent").show();

			}
			else
			{
				$("#entries").hide();
				$("#recent").hide();
			}
		});
	});
}

function getLocation(){
	if(!navigator.geolocation){
		alert("can not use geolocation");
		return;
	}
	navigator.geolocation.getCurrentPosition(locSuccess,locFail,{enableHighAccuracy:false});
}

function locSuccess(position){
	trNotes.lat=position.coords.latitude;
	trNotes.lng=position.coords.longitude;
}

function locFail(error){
	var msg="Cannot determine location.";
	if(error.code==error.PERMISSION_DENIED)
	{
		msg+="Geolocation is disabled.";
	}
	try{
		navigator.notification.alert(mag,null,"Geolocation");
	}catch(e){
		alert(msg);
	}
}

//插入日志
function insertEntry(e){
	var title=$("#title").val(),
		details=$("#details").val(),
		photo=$("#myPhoto").attr("src");
	 //alert(photo);
	if(!title)
		title="无";
	if(!details)
		details="无";
	 if(!photo)
	 	photo="images/nophoto.png";
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("INSERT into notes (title,details,entered,latitude,longitude,photourl) VALUES(?,?,date('now'),?,?,?);",[title,details,trNotes.lat,trNotes.lng,photo],
		function(){
			$.mobile.changePage("#home","slide",false,true);
			$("#title").val("");
			$("#details").val("");
			$("myPhoto").css("display","none");
		},null);
	});
	e.preventDefault();
}


function getItem(id){
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("SELECT * FROM notes WHERE id=?",[id],function(t,result){
			var row=result.rows.item(0),entered=convertToMDY(row.entered),updated=row.updated;
			var photo;
			opts={};
			$("#display h1").text(row.title);
			$("#display article").text(row.details);
			photo=row.photourl;
			if(!row.photourl)
				photo="images/nophoto.png";
			$("#displayphoto").attr("src",photo);//.src=row.photourl;
			//alert("DISPLAYS"+row.photourl);
			/*if(row.latitude==null){
				$("#showmap").parent("p").hide();
			}else{
				$("#showmap").parent("p").show();
				opts.title=row.title;
				opts.lat=row.latitude;
				opts.lng=row.longitude;
				
				$("#showmap").unbind("click");
				$("#showmap").click(opts,displayMap);
			}*/
			
			$("#display footer").html("<p>创建时间:"+entered+"</p>");
			
			if(updated!=null){
				updated=convertToMDY(updated);
				
				$("#display footer").append("<p>修改时间:"+updated+"</p>");
			}
			
			$("#delete,#update").attr("data-trnote",id);
			
			$("#title2").val(row.title);
			$("#details2").val(row.details);
		});
	});
}


function convertToMDY(date){
	var d=date.split("-");
	return d[1]+"/"+d[2]+"/"+d[0];
}

function displayMap(e){
	var title=e.data.title,
	latlng=e.data.lat+","+e.data.lng;
	
	if(typeof device !="undefined"&& device.platform.toLowerCase()=="android"){
		window.location="http://maps.google.com/maps?z=16&q="+encodeURIComponent(title)+"@"+latlng;
	}else{
		$("#map h1").text(title);
		$("#map div[data-role=content]").html("<img src='http://maps.google.com/maps/api/staticmap?center="+latlng+"&zoom=16&size=320x420&markers="+latlng+"&sensor=false'>");
		
		$.mobile.changePage("#map","fade",false,true);
	}
}


function editItem(){
	$.mobile.changePage("#editNote","slideup",false,true);
}

function deleteItem(e){
	var id=$(this).attr("data-trnote");
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("DELETE FROM notes WHERE id=?",[id],$.mobile.changePage("#travellist","slide",false,true),null);
	});
	
	e.preventDefault();
}

function updateItem(e){
	var title=$("#title2").val(),details=$("#details2").val(),id=$(this).attr("data-trnote");
	
	$.mobile.notesdb.transaction(function(t){
		t.executeSql("UPDATE notes SET title=?,details=?,updated=date('now') WHERE id=?",[title,details,id],$.mobile.changePage("#travellist","flip",false,true),null);
	});
	
	e.preventDefault();
}


function swapList(){
	var btn=$("#limit .ui-btn-text");
	if(btn.text()=="全部"){
		btn.text("最近");
		//$("#entries h2").text("全部日记");
		trNotes.limit=-1;
	}else{
		btn.text("全部");
		//$("#entries h2").text("最近");
		trNotes.limit=10;
	}
	getTitles();
}


function getPhoto(){
	//alert("click getPhoto");
	if(!navigator.camera) {
		alert("camera can not use");
		return;
	}
	navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });

	function onSuccess(imageData) {
		//alert("camer successful!!!");
		//alert(imageData);
		var newnote=$("#newNote");
		var src=imageData;
		//var src="https://img-blog.csdnimg.cn/2022010701105288314.jpeg" + imageData;
		var img=$("#myPhoto");
		img.attr("src",src);
		img.css("display","block");
		//var img="<img src="+src+"/>";
		//newnote.append(img);
		newnote.listview("refresh");
	  
	}

	function onFail(message) {
	   alert(' carema Failed because: ' + message);
	}


}