手把手教你开发Chrome扩展二:为html添加行为
2017-07-28 14:31
375 查看
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
手把手教你开发Chrome扩展二:为html添加行为
手把手教你开发Chrome扩展三:关于本地存储数据
上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的html,这一节我们将就html DOM添加部分添加脚本,即脚本在我们的popup页面中进行的操作,页面所产生的变化。
正常情况下数据处理加载完成状态,这些数据是从本地数据读取的。
点击“添加新项”,出现输入框,输入文字后回车提交数据:
添加完成后将数据存储,同时添加DOM元素:
考虑到功能最简化处理,点击已标为完成的任务,将提示“删除或重置为未完成”:
以上功能为最核心功能,可以在此基础上进行扩展,比如任务分组,修改任务,任务提醒,网络同步数据等等。
下面开始相应的脚本内容。
为了避免全局变量,使用匿名函数方式,所有事件处理及数据绑定均在此函数中进行,同时定义与jQuery中的$()类似的函数:
建立Tasks对象,定义show()函数和hide()函数,同时存储几个常用的DOM对象。
其中show()函数和hide()函数均使用了链式调用,每次执行此函数均会返回对象本身,这样对象就可以使用形如类似jQuery书写方式来使用此函数。
然后注册事件:
其中待完成部分为我们下一节将重点计到的html5的本地存储功能。再定义数据操作部分,先写上空白函数:
还需要初始化此函数使其执行并让匿名函数执行:
好吧,以下就是本节中所要提到的全部代码:
代码中尚未实现的部分,我们将会在下节详细讲解其实现。
手把手教你开发Chrome扩展二:为html添加行为
手把手教你开发Chrome扩展三:关于本地存储数据
上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的html,这一节我们将就html DOM添加部分添加脚本,即脚本在我们的popup页面中进行的操作,页面所产生的变化。
正常情况下数据处理加载完成状态,这些数据是从本地数据读取的。
点击“添加新项”,出现输入框,输入文字后回车提交数据:
添加完成后将数据存储,同时添加DOM元素:
考虑到功能最简化处理,点击已标为完成的任务,将提示“删除或重置为未完成”:
以上功能为最核心功能,可以在此基础上进行扩展,比如任务分组,修改任务,任务提醒,网络同步数据等等。
下面开始相应的脚本内容。
为了避免全局变量,使用匿名函数方式,所有事件处理及数据绑定均在此函数中进行,同时定义与jQuery中的$()类似的函数:
然后注册事件:
相关文章推荐
- 手把手教你开发Chrome扩展二:为html添加行为
- 手把手教你开发Chrome扩展二:为html添加行为
- 黄聪:360浏览器、chrome开发扩展插件教程(2)为html添加行为
- 手把手教你开发Chrome扩展二:为html添加行为
- 手把手教你开发Chrome扩展
- 手把手教你开发Chrome扩展三:关于本地存储数据
- 关于Chrome扩展程序开发 popup.html页面通过jsonp的方式与服务端交互问题
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
- 手把手教你Chrome扩展开发:本地存储篇
- 手把手教你开发Chrome扩展三:关于本地存储数据
- 手把手教你开发Chrome扩展三:关于本地存储数据
- 开发顺带NPAPI插件的Chrome扩展
- 第63篇Chrome扩展蓝牙开发(三) 及PHP研究
- HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用
- [转]为前端开发人员制作的 Chrome 扩展 jsbeautifier
- chrome 手动添加扩展插件
- 过滤分享的Chrome扩展开发详解
- 设计技巧7:装饰器 Decorator 动态地添加责任到对象身上,扩展类的行为比继承更灵活
- Chrome扩展开发指南