当你在看我前面所写的HTML 5例子时,我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API,而是想用例子来告诉开发人员如何真正的以一种实用的和创新的方式实现这些API。
在九十年代中期,我曾注册了一个软件专利,它是一个“WEB便利贴”。用最简单的话来描述就是,它能创建一个“黄色的便利贴”,粘在你的网页上,就像现实生活中你贴在电脑显示器上的效果。HTML5的内容可编辑功能和本地存储(localStorage)功能使创建web便利贴的功能变得快速简单!
演示程序如何使用:
用鼠标点击便利贴的区域,敲入信息。这个程序会把你敲入的信息都存入本地存储里(不是cookie里)。当你重新访问这个页面时,你的便利贴信息就会记住你上次写的内容。请记住,没有一个浏览器完全实现了HTML5,这个例子需要在支持HTML5的浏览器上运行,比如Firefox3.5以上。
下面就是我的例子(点击,然后输入你的信息!):
实现localStorage的关键方法很简单,就像这些:
function storeUserScribble(id) {
var scribble = document.getElementById(‘scribble’).innerHTML;
localStorage.setItem(‘userScribble’,scribble);
}
function getUserScribble() {
if ( localStorage.getItem(‘userScribble’)) {
var scribble = localStorage.getItem(‘userScribble’);
}
else {
var scribble = ‘<font color=blue face=”Geneva, Arial” size=6><i>你可以在这个便利贴上随意编写… 而且下次你再访问我的博客时就会看到我记住了你输入的信息!</i></font>’;
}
document.getElementById(‘scribble’).innerHTML = scribble;
}
我选择在 <td>上放置我的内容可编辑属性和onkeyup事件:
<td background=”https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg” contenteditable=”true” id=”scribble” onkeyup=”storeUserScribble(this.id)”></td>
例子中完整的HTML代码可以 点击这里下载。
在这个例子中,便利贴是可以缩放的。创建一个小便利贴,把它放在你的web网页上,这给你的网站或web应用增添了一个有趣的功能。
- 大小: 93.6 KB
分享到:
相关推荐
HTML5+CSS3便利贴
桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴
软件功能小小,但是又不可或缺,像便利贴那样朴素、简单安分,每个人都会有很多琐碎的事, 记住这些事就交给简单的便利贴吧。如果您时常忘记重要事情,放在桌面的便利贴给了很好的方式, 随时记录您的灵感,时时刻刻...
桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴桌面便利贴
便利贴小程序
这是一个用WPF编写的便利贴程序,可以给自己留便利贴,也可以向局域网上的其他人发送便利贴。虽然代码没有经过规范化的整理,但可读性也不低。其中涉及到WPF、动画、C#局域网通信、WPF样式、模板、Windows托盘程序等...
便利贴-V1.0,适用于全系列的Windows操作系统,是您桌面便利贴的绝佳工具。
javascript愿望便利贴七夕代码
JS日历便利贴.rar ,便利贴、备忘录的电子日历
MFC 便签 便利贴 源代码,背景色,字体大小,窗口置顶
本人写的小程序-便利贴,简单实用
任务管理便利贴PPT素材.pptx,任务管理便利贴PPT,适用于分析任务状态更新等等各种情况,可以用在销售行业PPT中,项目汇报PPT中,任务管理PPT中,一个简单的任务管理便利贴,可以很清楚的罗列任务管理的完成情况
桌面便利贴,再也不用买便利帖了,方便实用。
创意便签便利贴设计PPT模板。一套很有创意的PowerPoint模板,采用便签便利贴图形设计。
stickies是一款简单易用的电脑桌面便利贴软件,它的功能非常丰富,可以让用户再也不会忘记任何重要的事项、工作内容或是待办事项,甚至是一些小琐事,快来下载体验吧。 软件功能特色 stickies 文件虽然很小,但功能...
SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久...
桌面便笺,方便快速的便利贴 桌面便笺,方便快速的便利贴 桌面便笺,方便快速的便利贴 桌面便笺,方便快速的便利贴
截图作为悬浮窗口在屏幕最上层显示。可以保存截图文件到临时文件夹。 用于将数据或图文内容截图置顶到屏幕上,避免多窗口切换。 C#私人打造,绿色免安装,替代snipaste,小巧易用。
好的便利方便你,好的标签送给你,还在为找个方便的电子软件烦恼吗?快点行动吧