<!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>
<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);
}
//获得当前的url
chrome.tabs.getSelected(null,function(tab) {alert(tab.url) });
/*注册事件*/
//打开添加文本框
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>
Chrome插件，弹出当前uri
4星 · 超过85%的资源 需积分: 50 96 浏览量
2012-06-09
11:56:23
上传
评论
收藏 8KB RAR 举报 
MyTaskList.rar （7个子文件） 
MyTaskList images 
bg_task_off.gif 170B bg_task_on.gif 118B
Thumbs.db 8KB
popup.html 5KB manifest.json 302B
icon.png 1KB Thumbs.db 4KB
- 1
- 2
前往页