读书人

用jQuery-mobile干的一个记事本(后台

发布时间: 2013-02-24 17:58:56 作者: rapoo

用jQuery-mobile做的一个记事本(后台操作)

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

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

1、首先,新建一个;

用jQuery-mobile干的一个记事本(后台操作)

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

用jQuery-mobile干的一个记事本(后台操作)

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

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

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

用jQuery-mobile干的一个记事本(后台操作)

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

用jQuery-mobile干的一个记事本(后台操作) 用jQuery-mobile干的一个记事本(后台操作)

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

用jQuery-mobile干的一个记事本(后台操作)用jQuery-mobile干的一个记事本(后台操作)用jQuery-mobile干的一个记事本(后台操作)

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

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


读书人网 >移动开发

热点推荐