## 標記完成狀態
~~~
$(function(){
function lg(a){
console.log(a);
}
function get(index){
return store.get('task_list')[index];
}
var $form_add_task = $('.add-task');
/* 刪除按鈕*/
var $task_delete_trigger;
var task_list = undefined;
/*詳情按鈕*/
var $task_detail_trigger;
var $task_detail = $('.task-detail');
/* 面紗*/
var $task_detail_mask = $('.task-detail-mask');
var current_index;
/*更新的表單*/
var $update_form;
var $task_detail_content;
/* 修改內容的隱藏輸入框*/
var $task_detail_content_input;
var $checkbox_complete;
//加載默認數據
init();
$form_add_task.on('submit',on_add_task_form_submit);
/*點擊面紗，隱藏詳情*/
$task_detail_mask.on('click',hide_task_detail);
function on_add_task_form_submit(e){
var new_task = {};
//禁用默認行為
e.preventDefault();
/*獲取新task的值*/
var $input = $(this).find('input[name=content]');
new_task.content = $input.val();
/*判空*/
if(!new_task.content) return;
console.log(new_task);
/*存入新task*/
/*var result = add_task(new_task);*/
if(add_task(new_task)){
/*aad_task方法中已經刷新過頁面*/
// render_task_list();
/*添加后把input清空*/
$input.val('');
}
}
function listen_task_detail(){
$task_detail_trigger.on('click',function(){
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
lg(index);
show_task_detail(index);
});
}
/* 查看Task詳情*/
function show_task_detail(index){
/*渲染詳情數據*/
render_task_detail(index);
// current_index = index;
$task_detail.show();
$task_detail_mask.show();
}
/* 更新詳情*/
function update_task(index,data){
if(!task_list[index]) return;
task_list[index] = data;
refresh_task_list();
}
function hide_task_detail(){
$task_detail.hide();
$task_detail_mask.hide();
}
function render_task_detail(index){
if(index ==undefined || !task_list[index]) return;
var item = task_list[index];
var tpl = '<form>'+
'<div class="content">'+
item.content+
'</div>'+
'<div><input style="display:none;" type="text" name="content" value="'+item.content+'"></div>'+
'<div>'+
'<div class="desc">'+
'<textarea name="desc">'+item.desc+'</textarea>'+
'</div>'+
'</div>'+
'<div class="remind">'+
'<input name="remind_date" type="date" value="'+item.remind_date+'"/>'+
'</div>'+
'<div><button type="submit">更新</button></div>'+
'</form>';
$task_detail.html('');
$task_detail.html(tpl);
$update_form = $task_detail.find('form');
$task_detail_content = $update_form.find('.content');
$task_detail_content_input = $update_form.find('[name=content]');
$task_detail_content.on('dblclick',function(){
$task_detail_content_input.show();
$task_detail_content.hide();
})
$update_form.on('submit',function(e){
e.preventDefault();
/*修改的data*/
var data ={};
data.content = $(this).find('[name=content]').val();
data.desc = $(this).find('[name=desc]').val();
data.remind_date = $(this).find('[name=remind_date]').val();
console.log('data',data);
update_task(index,data);
hide_task_detail();
})
}
/*刪除按鈕綁定監聽*/
function listen_task_delete(){
/* 刪除操作的監聽*/
$task_delete_trigger.on('click',function(){
/* 刪除需要索引，所以先取得索引值*/
var $this = $(this);
var $item = $this.parent().parent();
var index = $item.data('index');
var tmp = confirm('確定刪除嗎？');
tmp ? delete_task(index):null;
});
}
function listen_checkbox_complete(){
$checkbox_complete.on('click',function(){
var $this = $(this);
// var is_complete = $this.is(':checked');
var index = $this.parent().parent().data('index');
var item = get(index);
if(item.complete){
update_task(index,{complete:false});
// $this.attr('checked',true);
}else{
update_task(index,{complete:true});
// $this.attr('checked',false);
}
});
}
/* 更新詳情*/
function update_task(index,data){
if(!task_list[index]) return;
//合并對象
task_list[index] =$.extend({},task_list[index], data);
refresh_task_list();
}
/*新增task方法*/
function add_task(new_task){
/*將Task推入task_list*/
task_list.push(new_task);
/*更新localStorage*/
// store.set('task_list',task_list);
refresh_task_list();
return true;
}
/*更新task_list方法*/
function refresh_task_list(){
store.set('task_list',task_list);
render_task_list();
}
/*刪除task方法*/
function delete_task(index){
/*如果沒有index或者在tasklist中不存在，直接返回 */
if(!index || !task_list[index]) return;
delete task_list[index];
refresh_task_list();
}
/*初始化數據方法*/
function init(){
/*沒有值就設置為空數組*/
task_list = store.get('task_list')||[];
if(task_list.length){
render_task_list();
}
lg(task_list);
}
/*把task-list渲染到頁面上*/
function render_task_list(){
/*tasklist容器*/
var $task_list = $('.task-list');
$task_list.html('');
/*完成的項目放進空數組*/
var complete_items = [];
/*循環遍歷tasklist*/
for(var i=0;i<task_list.length;i++){
var item = task_list[i];
if(item && item.complete){
complete_items[i]=item;
}else{
var $task = render_task_item(item,i);
}
$task_list.prepend($task);
}
/* 循環已經完成的項*/
for(var j=0;j<complete_items.length;j++){
$task = render_task_item(complete_items[j],j);
if(!$task) continue;
$task.addClass('completed');
$task_list.append($task);
}
$task_delete_trigger = $('.action.delete');
$task_detail_trigger = $('.action.detail');
listen_task_delete();
listen_task_detail();
$checkbox_complete = $('.task-list .complete[type=checkbox]');
listen_checkbox_complete();
}
/*渲染單條*/
function render_task_item(data,index){
/*判空*/
if(!data||!index) return;
var list_item_tpl =
'<div class="task-item" data-index="'+index+'">'+
'<span><input class="complete"'+(data.complete?'checked':'')+' type="checkbox"/></span>'+
'<span class="task-content">'+data.content+'</span>'+
'<span class="fr">'+
'<span class="action delete">刪除</span>'+
'<span class="action detail">詳細</span>'+
'</span>'+
'</div>';
return $(list_item_tpl);
}
});
~~~
**制作文字劃去線**
~~~css
.task-item.completed{
color: #aaa;
background: rgab(255,255,255,0.7);
}
.task-item.completed:after{
content: "";
height: 1px;
background: #aaa;
width: 96%;
position: relative;
top: -8px;
display: block;
float: right;
}
~~~
