上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的html,这一节我们将就html DOM添加部分添加脚本,即脚本在我们的popup页面中进行的操作,页面所产生的变化。
正常情况下数据处理加载完成状态,这些数据是从本地数据读取的。
点击“添加新项”,出现输入框,输入文字后回车提交数据:
添加完成后将数据存储,同时添加DOM元素:
考虑到功能最简化处理,点击已标为完成的任务,将提示“删除或重置为未完成”:
以上功能为最核心功能,可以在此基础上进行扩展,比如任务分组,修改任务,任务提醒,网络同步数据等等。
下面开始相应的脚本内容。
为了避免全局变量,使用匿名函数方式,所有事件处理及数据绑定均在此函数中进行,同时定义与jQuery中的$()类似的函数:
建立Tasks对象,定义show()函数和hide()函数,同时存储几个常用的DOM对象。
其中show()函数和hide()函数均使用了链式调用,每次执行此函数均会返回对象本身,这样对象就可以使用形如类似jQuery书写方式来使用此函数。
然后注册事件:
其中待完成部分为我们下一节将重点计到的html5的本地存储功能。再定义数据操作部分,先写上空白函数:
还需要初始化此函数使其执行并让匿名函数执行:
好吧,以下就是本节中所要提到的全部代码:
代码中尚未实现的部分,我们将会在下节详细讲解其实现。
本文转自黄聪博客园博客,原文链接:/huangcong/p/3531725.html,如需转载请自行联系原作者
如果觉得《360浏览器 chrome开发扩展插件教程(2)为html添加行为》对你有帮助,请点赞、收藏,并留下你的观点哦!