云笔记
弹出笔记子菜单
1. 利用事件冒泡在 note-list 上绑定事件弹出笔记子菜单:
1. 重构笔记列表模板, 为笔记子菜单触发按钮添加类 btn-note-menu
var noteTemplate = '
//绑定笔记子菜单的触发事件 $('#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 show