360浏览器、chrome开发扩展插件教程（2）为html添加行为

上一节我们已经讲了Chrome扩展的基础知识，并构建了基础的html，这一节我们将就html DOM添加部分添加脚本，即脚本在我们的popup页面中进行的操作，页面所产生的变化。

正常情况下数据处理加载完成状态，这些数据是从本地数据读取的。

点击“添加新项”，出现输入框，输入文字后回车提交数据：

添加完成后将数据存储，同时添加DOM元素：

考虑到功能最简化处理，点击已标为完成的任务，将提示“删除或重置为未完成”：

以上功能为最核心功能，可以在此基础上进行扩展，比如任务分组，修改任务，任务提醒，网络同步数据等等。

下面开始相应的脚本内容。

为了避免全局变量，使用匿名函数方式，所有事件处理及数据绑定均在此函数中进行，同时定义与jQuery中的$()类似的函数：

(function(){

var $=function(id){return document.getElementById(id);}

})();

建立Tasks对象，定义show()函数和hide()函数，同时存储几个常用的DOM对象。

var Tasks = {

show:function(obj){

obj.className='';

return this;

},

hide:function(obj){

obj.className='hide';

return this;

},

//存储dom

$addItemDiv:$('addItemDiv'),

$addItemInput:$('addItemInput'),

$txtTaskTitle:$('txtTaskTitle'),

$taskItemList:$('taskItemList')

}

其中show()函数和hide()函数均使用了链式调用，每次执行此函数均会返回对象本身，这样对象就可以使用形如类似jQuery书写方式来使用此函数。

然后注册事件：

//.....

//初始化

init:function(){

/*注册事件*/

//打开添加文本框

Tasks.$addItemDiv.addEventListener('click',function(){

Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);

Tasks.$txtTaskTitle.focus();

},true);

//回车添加

Tasks.$txtTaskTitle.addEventListener('keyup',function(ev){

var ev=ev || window.event;

if(ev.keyCode==13){

//TODO:写入本地数据

Tasks.AppendHtml(task);

Tasks.$txtTaskTitle.value='';

Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);

}

ev.preventDefault();

},true);

//取消

Tasks.$txtTaskTitle.addEventListener('blur',function(){

Tasks.$txtTaskTitle.value='';

Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);

},true);

//TODO:初始化数据，加载本地数据，生成html

},

//....

其中待完成部分为我们下一节将重点计到的html5的本地存储功能。再定义数据操作部分，先写上空白函数：

//....

//增加

Add:function(){

//TODO

},

//修改

Edit:function(){

//TODO

},

//删除

Del:function(){

//TODO

},

//...

还需要初始化此函数使其执行并让匿名函数执行：

(function(){

var Tasks = {

//***

}

Tasks.init();

})();

好吧，以下就是本节中所要提到的全部代码：

(function(){

var $=function(id){return document.getElementById(id);}

var Tasks = {

show:function(obj){

obj.className='';

return this;

},

hide:function(obj){

obj.className='hide';

return this;

},

//存储dom

$addItemDiv:$('addItemDiv'),

$addItemInput:$('addItemInput'),

$txtTaskTitle:$('txtTaskTitle'),

$taskItemList:$('taskItemList'),

//初始化

init:function(){

/*注册事件*/

//打开添加文本框

Tasks.$addItemDiv.addEventListener('click',function(){

Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);

Tasks.$txtTaskTitle.focus();

},true);

//回车添加

Tasks.$txtTaskTitle.addEventListener('keyup',function(ev){

var ev=ev || window.event;

if(ev.keyCode==13){

//TODO:写入本地数据

Tasks.AppendHtml(Tasks.$txtTaskTitle.value);

Tasks.$txtTaskTitle.value='';

Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);

}

ev.preventDefault();

},true);

//取消

Tasks.$txtTaskTitle.addEventListener('blur',function(){

Tasks.$txtTaskTitle.value='';

Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);

},true);

//TODO:初始化数据，加载本地数据，生成html

},

//增加

Add:function(){

//TODO

},

//修改

Edit:function(){

//TODO

},

//删除

Del:function(){

//TODO

},

AppendHtml:function(title){

var oDiv=document.createElement('div');

oDiv.className='taskItem';

var oLabel=document.createElement('label');

oLabel.className= 'on';

var oSpan=document.createElement('span');

oSpan.className='taskTitle';

var oText=document.createTextNode(title);

oSpan.appendChild(oText);

oDiv.appendChild(oLabel);

oDiv.appendChild(oSpan);

//注册事件

oDiv.addEventListener('click',function(){

//TODO

},true);

Tasks.$taskItemList.appendChild(oDiv);

},

RemoveHtml:function(){

//TODO

}

Tasks.init();

})();

代码中尚未实现的部分，我们将会在下节详细讲解其实现。

本文转自黄聪博客园博客，原文链接：http://www.cnblogs.com/huangcong/p/3531725.html，如需转载请自行联系原作者

360浏览器、chrome开发扩展插件教程（2）为html添加行为相关推荐

黄聪：360浏览器、chrome开发扩展插件教程（1）开发Chrome Extenstion其实很简单
转载:http://www.cnblogs.com/walkingp/archive/2011/03/31/2001628.html Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是 ...
Chrome浏览器录屏扩展插件
Chrome浏览器录屏扩展插件,可以录制网页操作或者桌面操作.生成MP4 Loom https://chrome.google.com/webstore/detail/loom-video-recor ...
如何才能不看知乎广告？手机浏览器安装Edge扩展程序教程
title: 如何才能不看知乎广告?手机浏览器安装Edge扩展程序教程 tags: 知乎简书掘金 categories: 极客知乎App的广告真的是越来越多了,问题与问题之间插广告,每个回答必插 ...
360浏览器 Adobe Flash Player插件怎么开启
360极速浏览器使用时间长,打开网站较多的时候,容易出现打开速度缓慢的情况,可以停用浏览器的Adobe Flash Player插件,有一定提升速度的作用.但是系统停用了flash插件,会影响有些网站 ...
为 Visual Studio 2010 开发扩展插件
之前看到有国外的大神开发了一些非常好玩的 Visual Studio 扩展插件,觉得非常有意思,自己也参考了别人的代码做了一个插件. 首先需要安装 Visual Studio SDK ,安装不需要其它 ...
360浏览器怎么下html,360浏览器怎么装vue-devtools插件？
360极速浏览器扩展程序中心并没有提供vue-devtools插件,因此需要自己安装.那么360极速浏览器怎么装vue-devtools插件?下面本篇文章给大家介绍一下. 本文介绍方法适用于所有Chr ...
chrome快捷键扩展插件SurfingKeys
软件介绍 SurfingKeys插件是一款可以增加chrome快捷键的插件,这款插件可以让你像使用vim一样使用chrome浏览器.有了这款插件你基本就不需要鼠标来控制chrome了,直接键盘即可解决 ...
ldaptemplate 分页_长图片如何分页打印？3秒搞定|360浏览器|chrome浏览器
将永恒君的百宝箱设为星标精品文章第一时间读文章里面介绍的是用win自带的"画图"软件来进行设置和调节.这两天又发现一个更棒的技巧,和大家分享一下.这次需要用到的就是平常使用的浏 ...
编写Chrome扩展插件教程
一个 Chrome 是一个配置(入口)文件 manifest.json 和一系列 html.css.js.图片文件的集合,然后将代码使用Chrome打包成crx文件即可使用然后生成crx文件,直接把 ...

360浏览器、chrome开发扩展插件教程（2）为html添加行为

360浏览器、chrome开发扩展插件教程（2）为html添加行为相关推荐

最新文章

热门文章