[转]给力的Web便签应用

ti8989

转自给力技术：http://site518.net/html5-sticky-notes/

　　HTML5Sticky是一个很漂亮的Web便签应用程序，它利用了HTML5的local storage和CSS3等技术来创建便签。它用modernizr来检测浏览器对HTML5/CSS3的特性支持情况，当你在不支持HTML5的浏览器中运行此程序的话它会给出提示。
　　使用方法如下：

　　首先要加载jQuery库和HTML5Sticky的相关JS、CSS文件

<script src="jquery.min.js"></script>
<script src="respond.min.js"></script>
<script src="modernizr.custom.23610.js"></script>
<script src="html5sticky.js"></script>
<script src="prettyDate.js"></script>

　　之后在页面中合适的地方添加如下四个按钮

<a href="#" id="addnote"><img src="add.png"><span>添加便签</span></a>
<a href="#" id="removenotes"><img src="remove.png"><span>删除便签</span></a>
<a href="#" id="shrink"><img src="decrease.png"><span>收缩便签</span></a>
<a href="#" id="expand"><img src="increase.png"><span>展开便签</span></a>

　　然后再添加一个ID为main的div，动态添加的便签都会显示在这个div层中。

<div id="main"></div>

查看演示效果