首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

[转]给力的Web便签运用 - HTML5Sticky

2012-08-30 
[转]给力的Web便签应用 - HTML5Sticky转自给力技术:http://site518.net/html5-sticky-notes/  HTML5Sticky

[转]给力的Web便签应用 - HTML5Sticky
转自给力技术: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>

查看演示效果

热点排行