头像

可增加删除的待办事项列表【原创

来源:http://www.sucaihuo.com/js/1979.html 素材火管理员 2017-05-19 22:34浏览(252) 收藏

一款简单实用的待办事项列表功能代码,可点击加号输入新的待办事项回车即可增加,鼠标滑动到每一个待办事项时出现删除按钮,可以点击删除当前待办事项,已经完成的待办事项,可以点击增加删除线并自动变灰,实际的细节功能请查看演示。
可增加删除的待办事项列表

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 8 下载资源 下载积分: 88 积分

开头引入CSS样式和jquery库,样式有两个,可以自行合并和优化:

<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

body部分写好事件容器和演示的数据,可以自行扩展,代码如下:

<div id="container">
	<h1>今日待办事项<i class="fa fa-plus"></i></h1>
	<div class="slide">
		<input type="text" placeholder="新的待办事项">
	</div>
	<ul>
		<li><span><i class="fa fa-trash-o"></i></span>6:30起床晨炼</li>
		<li><span><i class="fa fa-trash-o"></i></span>7:30洗漱完吃早餐</li>
		<li><span><i class="fa fa-trash-o"></i></span>8:00准时到公司</li>
    	<li><span><i class="fa fa-trash-o"></i></span>9:30邀约客户</li>
    	<li><span><i class="fa fa-trash-o"></i></span>10:30汇报工作</li>
	</ul>
</div>

底部绑定click事件和键盘回车事件,部分代码如下:

$("input[type='text']").on("keypress", function(){
	if(event.which == 13){
		var newItem = "<li><span><i class='fa fa-trash-o'></i></span>" + $(this).val() + "</li>";
		$("ul").append(newItem);
		$(this).val("");
	}
});

大家可以试着修改成以下的效果:

声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/1979.html
评论9
头像

友情提示:垃圾评论一律封号...

  • 头像 8楼
    05-31 09:23
    scottandyou
    很实用,已收藏
  • 头像 7楼
    05-28 11:37
    richer
    结合日历做也是可以的。
  • 头像 6楼
    05-24 21:55
    2015170706
    待办事项列表这个不错
  • 头像 5楼
    05-21 15:09
    gaogaoup
    这个不错,非常实用
  • 头像 4楼
    05-20 17:19
    zenxiong88
    这个弹出狂不错
  • 头像 3楼
    05-20 11:10
    richer
    可以结合数据库来操作的。
  • 头像 板凳
    05-20 11:02
    joyer
    这个功能很实用,赞一个!
  • 头像 椅子
    05-20 10:45
    ehgoo
    收藏了,,写得不错
  • 头像 沙发
    05-20 10:42
    toease
    这个功能很棒哦!!!
1 2