上一节我们已经讲了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();
})();
|
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
阅读(1279) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
评论热议
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
