您的位置：首页 > 其它

Chrome插件my task list

2015-05-20 14:12 316 查看

这是Chrome插件，my task list的源文件，文件构成如下：

manifest.json

popup.html

其他的为icon

popup.html的源文件如下：

</pre><pre>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Task List</title>
<style type="text/css">
*{margin:0;padding:0;}
body{min-width:200px;color:#333;overflow: hidden;margin: 0px;padding:10px;background: white;font-size:12px;}
img{margin:0 4px;}
#addItemDiv{color:#ccc;height:20px;}
.hide{display:none;}
.show{display:block;}
.taskItem{cursor:pointer;padding:2px 0;}
input{width:100%;}
label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}
label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}
</style>
</head>
<body>
<div id="addItemDiv">添加新项</div>
<div id="addItemInput" class="hide"><input type="text" id="txtTaskTitle"></div>
<div id="taskItemList">
<div class="taskItem" id="task_1" title="4-13 14:50:37"><label class="on"></label><span class="taskTitle">俄方挼额</span></div></div>
<script type="text/javascript">
(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'),
//指针
index:window.localStorage.getItem('Tasks:index'),
//初始化
init:function(){
if(!Tasks.index){
window.localStorage.setItem('Tasks:index',Tasks.index=0);
}
/*注册事件*/
//打开添加文本框
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){
var task={
id:0,
task_item:$('txtTaskTitle').value,
add_time:new Date(),
is_finished:false
};
Tasks.Add(task);
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);
//初始化数据
if(window.localStorage.length-1){
var task_list=[];
var key;
for(var i=0,len=window.localStorage.length;i<len;i++){
key=window.localStorage.key(i);
if(/task:\d+/.test(key)){
task_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
for(var i=0,len=task_list.length;i<len;i++){
Tasks.AppendHtml(task_list[i]);
}
}
},
//增加
Add:function(task){
//更新指针
window.localStorage.setItem('Tasks:index', ++Tasks.index);
task.id=Tasks.index;
window.localStorage.setItem("task:"+ Tasks.index, JSON.stringify(task));
},
//修改
Edit:function(task){
window.localStorage.setItem("task:"+ task.id, JSON.stringify(task));
},
//删除
Del:function(task){
window.localStorage.removeItem("task:"+ task.id);
},
AppendHtml:function(task){
var oDiv=document.createElement('div');
oDiv.className='taskItem';
oDiv.setAttribute('id','task_' + task.id);
var addTime=new Date(task.add_time);
var timeString=addTime.getMonth() + '-' + addTime.getDate() + ' ' + addTime.getHours() + ':' + addTime.getMinutes() + ':' + addTime.getSeconds();
oDiv.setAttribute('title',timeString);
var oLabel=document.createElement('label');
oLabel.className= task.is_finished ? 'off' : 'on';
var oSpan=document.createElement('span');
oSpan.className='taskTitle';
var oText=document.createTextNode(task.task_item);
oSpan.appendChild(oText);
oDiv.appendChild(oLabel);
oDiv.appendChild(oSpan);
//注册事件
oDiv.addEventListener('click',function(){
if(!task.is_finished){
task.is_finished=!task.is_finished;
var lbl=this.getElementsByTagName('label')[0];
lbl.className= (lbl.className=='on') ? 'off' : 'on';
Tasks.Edit(task);
}else{
if(confirm('是否确定要删除此项？\r\n\r\n点击确定删除，点击取消置为未完成。')){
Tasks.Del(task);
Tasks.RemoveHtml(task);
}else{
task.is_finished=!task.is_finished;
var lbl=this.getElementsByTagName('label')[0];
lbl.className= (lbl.className=='on') ? 'off' : 'on';
Tasks.Edit(task);
}
}
},true);
Tasks.$taskItemList.appendChild(oDiv);
},
RemoveHtml:function(task){
var taskListDiv=Tasks.$taskItemList.getElementsByTagName('div');
for(var i=0,len=taskListDiv.length;i<len;i++){
var id=parseInt(taskListDiv[i].getAttribute('id').substring(5));
if(id==task.id){
Tasks.$taskItemList.removeChild(taskListDiv[i]);
break;
}
}
}
}
Tasks.init();
})();
</script>

</body></html>

manifest.json代码如下：

{
"name": "MyTaskList",
"version": "0.9.0",
"description": "Management my everyday's task lists.",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "My Task List",
"default_popup": "popup.html"
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： chrome chrome插件

相关文章推荐

新的分享

章节导航