18.4云笔记项目

//绑定笔记子菜单的触发事件 $('#note-list').on('click', '.btn-note-menu', showNoteMenu); 3. 添加事件处理方法

/** 显示笔记子菜单处理方法 */ function showNoteMenu(){ //找到菜单对象, 调用show() 方法 var btn = $(this); //如果当前是被选定的笔记项目就弹出子菜单 btn.parent('.checked').next().toggle(); //btn.parent('.checked') 获取当前按钮的父元素 //这个元素必须符合选择器'.checked', 如果不 //符合就返回空的JQuery元素. return false;//阻止点击事件的继续传播!避免传播到document对象时候, 触发关闭菜单事件 } 4. ready方法中绑定document的点击事件, 利用事件冒泡关闭子菜单

//监听整体的文档区域, 任何位置点击都要关闭笔记子菜单 $(document).click(hideNoteMenu); 5. 添加事件处理方法关闭子菜单

/** 关闭笔记子菜单事件处理方法 */ function hideNoteMenu(){ $('.note_menu').hide(); } 移动笔记功能

原理:

1. 持久层: 重用 NoteDao.updateNote 方法

略... 2. 业务层

1. 业务层方法 NoteService

boolean moveNote(String noteId, String notebookId) throws NoteNotFoundException, NotebookNotFoundException; 2. 实现业务层方法: NoteServiceImpl

public boolean moveNote(String noteId, String notebookId) throws NoteNotFoundException, NotebookNotFoundException { if(noteId==null || noteId.trim().isEmpty()){ throw new NoteNotFoundException(\不能空\没有对应的笔记\空\没有笔记本\data.setLastModifyTime(System.currentTimeMillis()); n = noteDao.updateNote(data); return n==1; } 3. 测试

3. 表现层

1. 在ready方法中监听移动按钮点击事件打开对话框

//监听笔记子菜单中移动按钮的点击 $('#note-list').on('click', '.btn_move', showMoveNoteDialog); 2. 添加事件处理方法, 打开对话框, 打开对话框以后加载笔记本下拉列表

/** 显示移动笔记对话框 */ function showMoveNoteDialog(){ var id = $(document).data('note').id; if(id){ $('#can').load('alert/alert_move.html', loadNotebookOptions); $('.opacity_bg').show(); return; } alert('必须选择笔记!'); } 3. 添加加载笔记本列表事件方法

/** 加载移动笔记对话框中的笔记本列表 */ function loadNotebookOptions(){ var url = 'notebook/list.do'; var data={userId:getCookie('userId')}; $.getJSON(url, data, function(result){ if(result.state==SUCCESS){ var notebooks = result.data; //清楚全部的笔记本下拉列表选项 //添加新的笔记本列表选项 $('#moveSelect').empty(); var id=$(document).data('notebookId'); for(var i=0; i') .val(notebook.id) .html(notebook.name); //默认选定当时笔记的笔记本ID if(notebook.id==id){ opt.attr('selected','selected'); } $('#moveSelect').append(opt); } }else{ alert(result.message); } }); } 4. 在ready方法中监听移动笔记对话框中的确定按钮

//监听移动笔记对话框中的确定按钮 $('#can').on('click', '.move-note', moveNote); 重构 alert_move.html, 在确定按钮上增加类 move-note

/** 移动笔记事件处理方法 */ function moveNote(){ var url = 'note/move.do'; var id = $(document).data('note').id; var bookId=$('#moveSelect').val(); //笔记本ID没有变化, 就不移动了! if(bookId==$(document).data('notebookId')){ return; } var data = {noteId:id, notebookId:bookId}; $.post(url, data, function(result){ if(result.state==SUCCESS){ //移动成功, 在当前笔记列表中删除移动的笔记 //将笔记列表中的第一个设置为当前笔记, 否则清空边编辑区域 var li = $('#note-list .checked').parent(); var lis = li.siblings(); if(lis.size()>0){ lis.eq(0).click(); }else{ $('#input_note_title').val(%um.setContent(\} li.remove(); closeDialog();//关闭对话框! }else{ alert(result.message); } }); } 6. 测试

删除笔记功能

1. 持久层

1. 重用 NoteDao.updateNote 方法.