位置：首页>> 网络编程>> JavaScript>> Task List 管理任务JavaScript源码

Task List 管理任务JavaScript源码

作者：topmaoer　来源：51js　发布时间：2010-01-22 15:43:00　

标签：任务,管理,JavaScript

下面代码的功能是为了管理任务的，大家项目中有需要用到的，尽管拿去吧。

这个东西用于可以管理任务

比如：今天我要做什么，做了没有，做了就打钩。

<!DOCTYPE HTML><html lang="zh-HK"><head> <title>Task List... - aspxhome.com</title> <meta charset="GBK"> <style type="text/css">.task{list-style-type:none;margin:0;padding:1px;width:200px;border:2px solid #999;font:normal 14px verdana,arial,'宋体';}.task li{height:20px;line-height:20px;display:block;clear:both;color:#000;}.task li:hover{background-color:#eee;}.task .newitem{padding-left:20px;color:#666;}.task input{float:left;}.task span{height:20px;width:90％;display:block;float:left;cursor:default; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.task span input{border:1px solid #000;height:15px;line-height:15px;font-size:12px;width:176px;} </style></head><body> <h4>Task List <任务列表 v1.0> :</h4> <div id='task'></div></body><script type="text/javascript">/** * tools package */var $=function(_){return document.getElementById(_)};var $$=function(_,el){return (el||document).getElementsByTagName(_)};var new$=function(_,map){var ele=document.createElement(_);for(var _key in map)ele.setAttribute(_key,map[_key]);return ele};var FOR=function($,fn){for(var _=0;_<$.length;_++)fn.call($[_],_,$);return $};var stopPropagation=function(e){e.stopPropagation?e.stopPropagation():(e.cancelBubble = true)};var addLoadEvent=function(fn){var _=window.onload;window.onload=(typeof _!='function')?fn:function(){_();fn()}};var addEventListener=function(el,type,fn){el.attachEvent?el.attachEvent('on'+type,function(){fn.call(el)}):el.addEventListener(type, fn, false)};String.prototype.format=function(){if(arguments.length==0)return this; for(var s=this,i=0;i<arguments.length;i++)s=s.replace(new RegExp('\\{'+i+'\\}','g'),arguments[i]);return s};/** * tasklist class */TaskList = { map : [], init : function(){ // init data this.el=(arguments[0]||'_task'), me=this; if(arguments[1]&&arguments[1].constructor===Array) FOR(arguments[1],function(i,o){ me.add(o[i]) }); else { document.body.appendChild(new$('div',{'id':this.el})); me.add({checked:'',content:'Default Item!'}) } }, add : function(entity){ this.map.push(entity); this.render().bind(); }, edit : function(i,content,chk){ if(i<0) (content&&content!='Add A New Item')?this.add({checked:(chk?'checked':''),content:content}):this.render().bind(); else { this.map[this.map.length-i-1].content=content; this.map[this.map.length-i-1].checked=(chk?'checked':''); this.render().bind(); } }, del : function(i){ var id=this.map.length-i-1,flag=false; FOR(this.map,function(j,o){ if(j>=id&&(flag=true))o[j]=o[j+1] }); if(flag)this.map.length-=1; this.render().bind(); }, bind : function(){ // bind event var me = this; FOR($$('li',$(this.el)),function(i,o){ var curr=i-1; addEventListener($$('span',this)[0],'click',function(){ this.replaceChild(new$('input',{'maxlength':180,'type':'text','value':this.innerHTML}),this.childNodes[0]); var __=$$('input',this)[0]; setTimeout(function(){__.select();__.focus()},1); addEventListener(__,'click',function(e){stopPropagation(e||window.event)}); addEventListener(__,'blur',function(){__.value?me.edit(curr,__.value.replace(/\>/g,'>').replace(/\</g,'<').replace(/\"/g,'"'),__.parentNode.parentNode.firstChild.checked):me.del(curr)}); addEventListener(__,'keypress',function(e){if((e||event).keyCode==13)__.blur()}); }); if(this.firstChild.type=='checkbox') addEventListener(this.firstChild,'click',function(){ me.edit(curr,$$('span',this.parentNode)[0].innerHTML,this.checked)}); addEventListener(this,'mouseover',function(){this.style.backgroundColor='#eee'});//IE6-bug <--li:hover addEventListener(this,'mouseout',function(){this.style.backgroundColor=''}); }); return this; }, render : function(){ // render element var i,list=this.map,depository=[],build='<li><input type="checkbox" name="sel" {0}><span title="{1}">{1}</span></li>'; for(i=list.length;i--;) depository.push(build.format(list[i].checked||'',list[i].content)); $(this.el).innerHTML = '<ul class="task"><li><span class="newitem">Add A New Item</span></li>{0}</ul>'.format(depository.toString().replace(/li\>\,/ig,'li>')); return this; }};/** * go! */addLoadEvent(function(){ TaskList.init('task',[{checked:'checked',content:'早会：各个项目组的汇报进度！'},{checked:'',content:'鼓励美工，并对其工作态度进行肯定。'}]);});</script></html>

投稿

Task List 管理任务JavaScript源码

猜你喜欢