上面 已经介绍了用JS实现,在页面上展示登陆用户下的笔记本功能 和 点击笔记本 展现笔记本下的笔记功能。
接着 还是 使用js 来实现其他功能。
一、单击笔记 显示 笔记内容和标题功能
1.先看效果
在newNote.js中 添加
//单击笔记,显示 title 和内容 $('#note-list').on('click', '.note', showNoteList);
showNoteList
//根据点击笔记title,展现笔记标题和内容 function showNoteList() { //当前点击得笔记本 var li = $(this); //li 得父元素找到 a,移除’checked'类 li.parent().find('a').removeClass('checked'); //li得 父元素找到 a ,增加checked 类 li.find('a').addClass('checked'); //获得当前点击笔记本得noteId var noteId = $('#note-list').find('a[class="checked"]').parent().data('noteId'); showCloudNote(noteId); }
showCloudNote(noteId)
function showCloudNote(noteId) { var url = 'getCloudNote.do'; var data = {noteId: noteId}; $.post(url, data, function (result) { if (result.data.state == 0) { console.log(result); var title = result.data.data.title; var body = result.data.data.body; $(document).data('oldTitle', title); $(document).data('oldBody', body); console.log("noteId:" + noteId); //显示笔记标题 document.getElementById('input_note_title').value = title; //显示笔记内容 um.setContent(body); } else { alert(result.data.data.message); } }) }
后台代码:
//获取笔记内容 @RequestMapping("getCloudNote.do") @ResponseBody public JsonResult getCloudNote(int noteId) { System.out.println("获取笔记内容"); return new JsonResult(editService.getCloudNote(noteId)); }
二. 弹框设计
1.先看edit.jsp 中一段代码
<!-- alert_background 类背景--> <div class="opacity_bg" style='display:none'></div> <!-- alert_notebook --> <div id="can"></div> <div class="col-xs-2" style='padding:0;' id='notebook-list'>
2.在newNote中添加
//新建笔记本 $('#add_notebook').click(CreateNewNotebook);
//弹出新建笔记本窗口 function CreateNewNotebook() { $('#can').load('./alert/alert_notebook.html', function () { //显示背景颜色 $('.opacity_bg').show(); //焦点 $('#input_notebook').focus(); //创建笔记本事件 $('.sure').click(CreateNote); }) }
//创建笔记本 function CreateNote() { var userId = getCookie('userId'); var noteName = $('#input_notebook').val(); console.log(noteName); console.log(userId); var data = {userId: userId, noteName: noteName}; var url = 'createNote.do'; $.post(url, data, function (result) { if (result.data.state == 0) { alert("创建成功"); //创建成功重新加载笔记本列表 loadNotebooks(); } else { alert(result.data.message) } });