日期:2014-05-16  浏览次数:20449 次

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");
		}