用jQuery-mobile做的一个记事本（后台操作）

          首先呢，我先做一下广告吧，我们团队是：IMUDGES（内蒙古大学精英开发者联盟 ）大家有什么好的想法可以和我们交流，给我的博客留言！  

        在我几天不断的努力下，记事本的后台操作基本搞定了，现在和大家就一起分享一下，首先，记事本应该有增、删、该的功能吧，今天我就和大家一起看看这些功能怎么实现，当然这是我的个人思路，如果大家有更好的想法可以给我留言，一起讨论讨论；

          1、首先，新建一个；

          

         好，第一个记事写好了，然后就开始保存了。我是这样做的，保存的时候把我笔记的题目放在一个<li></li>标签里面，然后把写好这个日记的日期也取下来，我看了一下我手机上的记事本，就有这个功能，所以我也加上了这个功能。先看看效果。

       

这样就有了以上的界面，那么里面的代码怎么写的呢，我先给大家说一说这个日期是怎么弄的。看代码：

var today = new Date();
var year = today.getFullYear();
var month = (today.getMonth()  + 1) < 10  ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
var day = (today.getDate())  < 10 ? '0' + (today.getDate()) : (today.getDate());
var hours = (today.getHours()) < 10 ? '0' + (today.getHours()) : (today.getHours());
var minutes = (today.getMinutes()) < 10 ? '0' + (today.getMinutes()) : (today.getMinutes());
var seconds = (today.getSeconds()) < 10 ? '0' + (today.getSeconds()) : (today.getSeconds());
date1 = year + "-" + month + "-" + today.getDate() + " " + hours + ':' + minutes + ':' + seconds;

这样date1这样一个变量就是一个时间的字符串，把这个字符串的值穿到<li></li>这个标签里面，用jQuery做这些任务。

        2、然后大家可以点击那个<li></li>标签，就是那个“我的第一个日记”，然后就是进入了你的写的内容了。看效果：

              

这里的内容我都设置成了只读的模式，目前大家是不能改动这个记事内容的，其实上一节的html5的代码中就有设置的，大家可以返回去看看那个代码。

         3、大家可以重新编辑这个记事或删除这个记事，按选项会弹出一个对话框可以进行选择删除还是编辑。看效果：

              

如果大家选择编辑的话，上面写的内容就变成可写的了，大家就可以改动了。

                  

大家应该能看出来吧，我的标题也变化了，上面显示的时间是你做完修改的时间！再然后看看删除：

 

这样就删除功能也有了。好吧，效果都看完了，说说代码吧。

var today = new Date();
var year = today.getFullYear();
var month = (today.getMonth()  + 1) < 10  ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
var day = (today.getDate())  < 10 ? '0' + (today.getDate()) : (today.getDate());
var hours = (today.getHours()) < 10 ? '0' + (today.getHours()) : (today.getHours());
var minutes = (today.getMinutes()) < 10 ? '0' + (today.getMinutes()) : (today.getMinutes());
var seconds = (today.getSeconds()) < 10 ? '0' + (today.getSeconds()) : (today.getSeconds());
date1 = year + "-" + month + "-" + today.getDate() + " " + hours + ':' + minutes + ':' + seconds;

var moban = $("#time");
$(function(){
	var title;
	var content;
	$("#save").click(function(){
		
		title=$("#texttheme").val();
		content = $("#textcontent").val();
		
		if(title=="")
			alert("theme is not null！");
		else{
			
			$.mobile.changePage("#page1","slideup");
			$("#time").append(date1);
			$("#neirong").append(title);
		    $("#time").slideDown("fast");
		    $("#content").slideDown("fast");
		    document.getElementById("texttheme").value="";
		    document.getElementById("textcontent").value="";    
		   
		}});
	
	
	
	$("#neirong").click(function(){
			document.getElementById("opentexttheme").value=title;
			document.getElementById("opentextcontent").value=content;
	 });
	
     $("#bianji").click(function(){
				$.mobile.changePage("#page2","slidedown");
				document.getElementById("texttheme").value=title;
				document.getElementById("textcontent").value=content;
				$("#save").click(function(){
					var today = new Date();
					var year = today.getFullYear();
					var month = (today.getMonth()  + 1) < 10  ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
					var day = (today.getDate())  < 10 ? '0' + (today.getDate()) : (today.getDate());
					var hours = (today.getHours()) < 10 ? '0' + (today.getHours()) : (today.getHours());
					var minutes = (today.getMinutes()) < 10 ? '0' + (today.getMinutes()) : (today.getMinutes());
					var seconds = (today.getSeconds()) < 10 ? '0' + (today.getSeconds()) : (today.getSeconds());
					date1 = year + "-" + month + "-" + today.getDate() + " " + hours + ':' + minutes + ':' + seconds;
					
					$("#time").empty();
					$("#neirong").empty();					
					$("#time").append(date1);
					
					$("#neirong").append(title);	
				});
			});
      $("#shanchu").click(function(){
		    	$.mobile.changePage("#page1","slidedown");
		    	$("#time").css("display","none");
		    	$("#content").css("display","none");
		    	title="";
		    	content="";
		    });
	    
			
});

说实话，我这人比较懒啊，就这样把整个的js文件的代码都靠过来了，本人习惯不是太好，反正能看懂的就多提意见，看不懂的给我留言。有了这个还有css里面的东西，写的不是很多，就是把一开始的显示的时间和题目的那个标签先影藏了，然后要用到的时候就把它给弄出来！看css代码吧：

#time{
	display: none;
}

#content{
	display: none;
	
}

就这么三四行，就是先把不该显示的东西先给影藏了！不过这就是一个练习吧，做的虽然不是很强大，但是有什么不足的地方还希望大牛指出，代码我就不一行一行解释了，不是很难，就是jQuery中的一些api。不懂的可以查一查jQuery的api。是在不懂的就直接把代码拷过去就行了。需要提醒的是，最好在google的chrome中运行，这个浏览器支持html5支持的比较好！好吧，没了，有什么小的作品再和大家分享！