最近几天做一个在线备忘录的功能,类似于igoogle中效果。
现在总算完成了,现总结一下:
页面效果使用javascript来实现,也可以使用jquery实现。二种的基本原理是一致的。
在一个大的div中放三个div层,分别用来放未完成,已完成,新建记录层。每一条记录都用一个层来放置。
新建一条记录,使用异步刷新,将记录保存到数据库中(为了要在不同的电脑上操作都可以见到),并且将该记录使用层的以下函数来改变该记录的位置(如果已完成就放到“已完成”div中,如果未完成放在“未完成"div中)。
可以使用的函数有:appendChild,insertBefore,insertAfter:添加一个节点;previousSibling和nextSibling:用来定位层的位置;再使用createElement从新创建一个层放在“新建记录层”;childNodes[num],firstChild,lastChild:获得当前节点的子节点;parentNode:获得指定节占的父节点。removeChild:移除掉指定的节点。反正感觉就是对dom对操作。
其中要注意的是,对div层进行移动后,可以有的浏览器会丢失一些属性,如checkbox的选择,这就要在移动后再赋一次。另外,appendChild可以将一个层移到另外一个位置,在原有位置不必删除。