添加功能todolist练习
css
1 /*base*/ 2 body { 3 background: #fff; 4 } 5 6 .btn { 7 display: inline-block; 8 padding: 4px 12px; 9 margin-bottom: 0; 10 font-size: 14px; 11 line-height: 20px; 12 text-align: center; 13 vertical-align: middle; 14 cursor: pointer; 15 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 16 border-radius: 4px; 17 } 18 19 .btn-danger { 20 color: #fff; 21 background-color: #da4f49; 22 border: 1px solid #bd362f; 23 } 24 25 .btn-danger:hover { 26 color: #fff; 27 background-color: #bd362f; 28 } 29 30 .btn:focus { 31 outline: none; 32 } 33 34 35 /*app*/ 36 .todo-container { 37 width: 600px; 38 margin: 0 auto; 39 } 40 .todo-container .todo-wrap { 41 padding: 10px; 42 border: 1px solid #ddd; 43 border-radius: 5px; 44 } 45 46 /*header*/ 47 .todo-header input { 48 width: 560px; 49 height: 28px; 50 font-size: 14px; 51 border: 1px solid #ccc; 52 border-radius: 4px; 53 padding: 4px 7px; 54 } 55 56 .todo-header input:focus { 57 outline: none; 58 border-color: rgba(82, 168, 236, 0.8); 59 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 60 } 61 62 /*main*/ 63 .todo-main { 64 margin-left: 0px; 65 border: 1px solid #ddd; 66 border-radius: 2px; 67 padding: 0px; 68 } 69 70 .todo-empty { 71 height: 40px; 72 line-height: 40px; 73 border: 1px solid #ddd; 74 border-radius: 2px; 75 padding-left: 5px; 76 margin-top: 10px; 77 } 78 /*item*/ 79 li { 80 list-style: none; 81 height: 36px; 82 line-height: 36px; 83 padding: 0 5px; 84 border-bottom: 1px solid #ddd; 85 } 86 87 li label { 88 float: left; 89 cursor: pointer; 90 } 91 92 li label li input { 93 vertical-align: middle; 94 margin-right: 6px; 95 position: relative; 96 top: -1px; 97 } 98 99 li button { 100 float: right; 101 display: none; 102 margin-top: 3px; 103 } 104 105 li:before { 106 content: initial; 107 } 108 109 li:last-child { 110 border-bottom: none; 111 } 112 113 /*footer*/ 114 .todo-footer { 115 height: 40px; 116 line-height: 40px; 117 padding-left: 6px; 118 margin-top: 5px; 119 } 120 121 .todo-footer label { 122 display: inline-block; 123 margin-right: 20px; 124 cursor: pointer; 125 } 126 127 .todo-footer label input { 128 position: relative; 129 top: -1px; 130 vertical-align: middle; 131 margin-right: 5px; 132 } 133 134 .todo-footer button { 135 float: right; 136 margin-top: 5px; 137 }
js
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>未完成版</title> 6 <link rel="stylesheet" href="index.css"> 7 <style> 8 .todo-main li button { 9 display: none; 10 } 11 </style> 12 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 13 <script type="text/javascript"> 14 $(function () { 15 // 模拟数据 实际的开发当中 根据后台接口来的 16 var dataJson = [{ 17 'content':'唱歌' 18 },{ 19 'content':'滑雪' 20 },{ 21 'content':'遛狗' 22 }]; 23 // 获取ul元素 24 var $todoMain = $('.todo-main'); 25 // 获取全选按钮 26 var $checkAll = $('#checkAll'); 27 28 // 数据绑定 1.页面初始化 29 function bindData(data) { 30 // 循环拼装节点 31 for (var i = 0; i < data.length; i++) { 32 $todoMain.append('<li class="todoItem" style="background: rgb(255, 255, 255);"><label>' + 33 '<input type="checkbox"><span>'+data[i].content+'</span></label>' + 34 '<button class="btn btn-danger" style="display: none;">删除</button></li>') 35 } 36 // 更新任务总数 37 allTodos(); 38 } 39 bindData(dataJson); 40 41 // 更新任务总数，用的次数多，用函数封装 42 function allTodos() { 43 // ul当中有多少个li 就有多少个任务 所以直接使用li的长度即可 44 $('#allTodos').html($todoMain.children('li').length) 45 } 46 47 // 更新已完成任务数，用的次数多，用函数封装 48 function allCompletedTodos() { 49 // 当前已经选中多少个复选框 就有多少个已完成任务 50 $('#allCompletedTodos').html($todoMain.find(':checkbox:checked').length) 51 } 52 53 // 复选框单击事件 54 $('.todoItem input').click(function () { 55 // 更新已完成任务数 56 allCompletedTodos(); 57 // 判断所有的任务都被选中了 58 $checkAll.prop('checked',$todoMain.find(':checkbox:not(:checked)').length === 0); 59 // $checkAll.prop('checked',$('#allTodos').html() == $('#allCompletedTodos').html()) 60 }) 61 62 // 全选按钮 63 $checkAll.click(function () { 64 // 让所有的复选框 与全选按钮的checked状态保持一致 65 $todoMain.find(':checkbox').prop('checked',this.checked) 66 // 更新已完成任务数 67 allCompletedTodos(); 68 }); 69 70 // // 移入移出li 71 // $('.todoItem').hover(function () { 72 // //颜色背景变化 73 // $(this).css('background','#ccc'); 74 // //删除按钮出现 75 // $(this).children('button').show(); 76 // },function () { 77 // $(this).css('background','#fff'); 78 // $(this).children('button').hide(); 79 // }); 80 81 // 给父元素绑定,事件委派 $('.todoItem') 82 // 第一个参数;选择器字符窜 83 $todoMain.delegate(('.todoItem'), 'mouseover' ,function(){ 84 //移入事件，颜色变化，删除按钮出来 85 $(this).css('background','pink') 86 // $(this).children('.btn-danger').css('display','block') 87 $(this).children('.btn-danger').show() 88 89 }) 90 91 $todoMain.delegate(('.todoItem'), 'mouseout' ,function(){ 92 //移出事件，颜色消失，删除按钮消失 93 $(this).css('background','#fff') 94 $(this).children('.btn-danger').hide() 95 96 }) 97 98 // 删除按钮 99 $('.todoItem>button').click(function () { 100 // 点击删除按钮 删除的是当前这个按钮的父元素li 101 $(this).parent().remove(); 102 // 更新任务总数 103 allTodos(); 104 // 更新已完成任务数 105 allCompletedTodos(); 106 // 如果删除某几个任务时 剩余的任务全都选中 全选的状态需要更新 107 // 需要确定当前任务列表当中还存在任务 全选才可以被选中 108 $checkAll.prop('checked',$todoMain.children('li').length!=0 && 109 $todoMain.find(':checkbox:not(:checked)').length === 0) 110 }) 111 112 113 // 清除已完成任务按钮 114 $('#removeAllCompleted').click(function () { 115 $todoMain.find(':checkbox:checked').parent().parent().remove(); 116 // 更新任务总数 117 allTodos(); 118 // 更新已完成任务数 119 allCompletedTodos(); 120 // 全选按钮只能是false状态 121 // 点击这个按钮之后 只有两种情况 122 // 1.删除所有选中的 留下一些 没有被选中的 这个时候全选不需要被选中 123 // 2.所有任务都被选中了 直接清空了所有任务 这个时候全选也不需要被选中 124 $checkAll.prop('checked',false); 125 }) 126 127 128 // 根据输入的值 创建新的任务 129 $('#newTodo').keyup(function (event) { 130 // 所有创建相关的逻辑 都要在按下回车的前提下执行 131 if(event.keyCode == 13){ 132 // 判断输入的值 去除空格后是否为空 133 if($.trim($(this).val())){ 134 // 输入有效 135 // 根据当前输入框的value 执行创建逻辑 136 var newData = [{ 137 'content':$(this).val() 138 }]; 139 bindData(newData); 140 // 更新全选状态 因为新增的任务一定是未完成状态 所以需要更新 且一定为false 141 $checkAll.prop('checked',false); 142 }else{ 143 // 输入无效 144 alert('请不要输入空信息') 145 } 146 // 清空输入框 147 $(this).val(''); 148 } 149 }) 150 151 }) 152 </script> 153 </head> 154 155 <body> 156 <div id="root"> 157 <div class="todo-container"> 158 <div class="todo-wrap"> 159 <div class="todo-header"> 160 <input id="newTodo" type="text" placeholder="请输入你的任务名称，按回车键确认" /> 161 </div> 162 <ul class="todo-main"> 163 164 </ul> 165 <div class="todo-footer"> 166 <label> 167 <input id="checkAll" type="checkbox"/> 168 </label> 169 <span> 170 已完成<span id="allCompletedTodos">0</span> / 全部<span id="allTodos">2</span> 171 </span> 172 <button id="removeAllCompleted" class="btn btn-danger">清除已完成任务</button> 173 </div> 174 </div> 175 </div> 176 </div> 177 </body> 178 179 </html>
