From b1cbb19b2bd5d5411d0f3e19c5266b968ae92df7 Mon Sep 17 00:00:00 2001
From: life <lifephp@gmail.com>
Date: Sun, 8 Feb 2015 18:41:47 +0800
Subject: [PATCH] starred

---
 node_modules/note.js                    |  25 ++++-
 note.html                               |   6 +-
 public/css/theme/basic.less             |  66 +++++++++++-
 public/css/theme/default.css            |  61 ++++++++++-
 public/css/theme/simple.css             |  61 ++++++++++-
 public/css/theme/writting-overwrite.css |  61 ++++++++++-
 public/css/theme/writting.css           |  61 ++++++++++-
 public/js/app/note.js                   | 135 +++++++++++++++++++++++-
 public/js/app/notebook.js               |  11 +-
 public/js/app/page.js                   |   4 +
 10 files changed, 455 insertions(+), 36 deletions(-)

diff --git a/node_modules/note.js b/node_modules/note.js
index 8ba27f95..a51c6dbb 100644
--- a/node_modules/note.js
+++ b/node_modules/note.js
@@ -109,20 +109,27 @@ var Note = {
 	// 获取笔记列表
 	getNotes: function(notebookId, callback) {
 		var me = this;
-		me._getNotes(notebookId, false, callback);
+		me._getNotes(notebookId, false, false, callback);
 	},
 	// 获取trash笔记
 	getTrashNotes: function(callback) {
 		var me = this;
-		me._getNotes('', true, callback);
+		me._getNotes('', true, false, callback);
 	},
-	_getNotes: function(notebookId, isTrash, callback) {
+	getStarNotes: function(callback) {
+		var me = this;
+		me._getNotes('', false, true, callback);
+	},
+	_getNotes: function(notebookId, isTrash, isStar, callback) {
 		var userId = User.getCurActiveUserId();
 		var query = {
 			UserId: userId,
 			IsTrash: false,
 			LocalIsDelete: false, // 未删除的
 		};
+		if(isStar) {
+			query['Star'] = true;
+		}
 		if(notebookId) {
 			query['NotebookId'] = notebookId;
 		}
@@ -179,6 +186,18 @@ var Note = {
 		});
 	},
 
+	// 加星或取消
+	star: function(noteId, callback) {
+		var me = this;
+		me.getNote(noteId, function(note) {
+			if(note) {
+				var to = !note.Star;
+				Notes.update({_id: note._id}, {$set: {Star: to, UpdatedTime: new Date()}});
+				callback(true, to);
+			}
+		});
+	},
+
 	// 笔记本下是否有笔记
 	hasNotes: function(notebookId, callback) {
 		Notes.count({NotebookId: notebookId, IsTrash: false, LocalIsDelete: false}, function(err, n) {
diff --git a/note.html b/note.html
index b94adb16..9b7e4659 100755
--- a/note.html
+++ b/note.html
@@ -102,12 +102,12 @@ function log(o) {
               <div class="folderHeader">
                 <i class="fa fa-star-o fa-left"></i>
                 <span>
-                  Started
+                  Starred
                 </span>
               </div>
   
-              <ul class="folderBody" id="shareNotebooks">
-                <li>a</li>
+              <ul class="folderBody" id="starNotes">
+                <li noteId=""><a>笔记1 <span class="delete-star" title="Remove">X</span></a></li>
               </ul>
             </div>
 
diff --git a/public/css/theme/basic.less b/public/css/theme/basic.less
index 5887eca8..e531d6fe 100644
--- a/public/css/theme/basic.less
+++ b/public/css/theme/basic.less
@@ -362,7 +362,7 @@ h1, h2, h3 {
 
 // blog
 #noteItemList {
-	.item-setting, .item-blog {
+	.item-setting, .item-blog, .item-star {
 	  position: absolute; 
 	  right: 1px;
 	  font-size: 10px;
@@ -371,7 +371,7 @@ h1, h2, h3 {
 	  border-radius: 5px;
 	  cursor: pointer;
 	  .fa {
-		  color: #fff !important;
+		  color: #fff;
 	  }
 	  width: 20px;
 	  text-align: center;
@@ -384,15 +384,35 @@ h1, h2, h3 {
 	  
 	 .item-blog {
 	 	top: 1px;
+	 	// 暂不支持
+	 	display: none;
 	 }
 	  
 	 .item-setting {
 	 	bottom: 0;
 	 	display: none;
 	 }
+	 .item-star {
+	 	bottom: 0;
+	 	right: 23px;
+	 	display: none;
+	}
+	// 是star的
+	.item-is-star {
+		.item-star {
+			// display: block;
+			.fa:before {
+	 			content: "\f005";
+	 		}
+	 		.fa {
+		 		color: yellow !important;
+	 		}
+		}
+
+	}
 }
 #noteItemList .item:hover  {
-	 .item-setting {
+	 .item-setting, .item-star {
 	 	display: block;
 	 }
 }
@@ -913,8 +933,11 @@ h1, h2, h3 {
   background-color: #65bd77 !important; // #eee;/*@bgColor*/;
   color: #fff;
   .fa {
-	 color: #eee !important;
+	 color: #eee;
   }
+  .item-info .fa {
+	 color: #eee !important;
+	}
   .item-title {
     color: #fff;
     // font-weight: 800;
@@ -1248,4 +1271,39 @@ top: 4px;
   left: 4px;
   line-height: 36px;
   color: #ccc;
+}
+
+#starNotes {
+	li {
+		position: relative;
+		margin: 0;
+		height: 30px;
+		border-bottom: 1px dashed #eee;
+		&.selected {
+			background: #eee;
+		}
+		a {
+			padding-left: 20px;
+			line-height: 30px;
+			display: block;
+			text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
+		}
+		.delete-star {
+			position: absolute;
+			right: 10px;
+			bottom: 0;
+			color: #ccc;
+			display: none;
+			cursor: pointer;
+			&:hover {
+				color: #000;
+			}
+		}
+		&:hover {
+			.delete-star {
+				display: block;
+			}
+		}
+	}
+
 }
\ No newline at end of file
diff --git a/public/css/theme/default.css b/public/css/theme/default.css
index acefbfce..fa8003e6 100644
--- a/public/css/theme/default.css
+++ b/public/css/theme/default.css
@@ -338,7 +338,8 @@ h3 {
   box-shadow: none;
 }
 #noteItemList .item-setting,
-#noteItemList .item-blog {
+#noteItemList .item-blog,
+#noteItemList .item-star {
   position: absolute;
   right: 1px;
   font-size: 10px;
@@ -352,21 +353,36 @@ h3 {
   background-color: #464C5E;
 }
 #noteItemList .item-setting .fa,
-#noteItemList .item-blog .fa {
-  color: #fff !important;
+#noteItemList .item-blog .fa,
+#noteItemList .item-star .fa {
+  color: #fff;
 }
 #noteItemList .item-setting:hover,
-#noteItemList .item-blog:hover {
+#noteItemList .item-blog:hover,
+#noteItemList .item-star:hover {
   opacity: 0.8;
 }
 #noteItemList .item-blog {
   top: 1px;
+  display: none;
 }
 #noteItemList .item-setting {
   bottom: 0;
   display: none;
 }
-#noteItemList .item:hover .item-setting {
+#noteItemList .item-star {
+  bottom: 0;
+  right: 23px;
+  display: none;
+}
+#noteItemList .item-is-star .item-star .fa:before {
+  content: "\f005";
+}
+#noteItemList .item-is-star .item-star .fa {
+  color: yellow !important;
+}
+#noteItemList .item:hover .item-setting,
+#noteItemList .item:hover .item-star {
   display: block;
 }
 .friend-header {
@@ -837,6 +853,10 @@ h3 {
 }
 .item-active .fa,
 #noteItemList .item-active:hover .fa {
+  color: #eee;
+}
+.item-active .item-info .fa,
+#noteItemList .item-active:hover .item-info .fa {
   color: #eee !important;
 }
 .item-active .item-title,
@@ -1136,6 +1156,37 @@ h3 {
   line-height: 36px;
   color: #ccc;
 }
+#starNotes li {
+  position: relative;
+  margin: 0;
+  height: 30px;
+  border-bottom: 1px dashed #eee;
+}
+#starNotes li.selected {
+  background: #eee;
+}
+#starNotes li a {
+  padding-left: 20px;
+  line-height: 30px;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#starNotes li .delete-star {
+  position: absolute;
+  right: 10px;
+  bottom: 0;
+  color: #ccc;
+  display: none;
+  cursor: pointer;
+}
+#starNotes li .delete-star:hover {
+  color: #000;
+}
+#starNotes li:hover .delete-star {
+  display: block;
+}
 ::selection {
   background: #000000;
   color: #ffffff;
diff --git a/public/css/theme/simple.css b/public/css/theme/simple.css
index 6eef6270..ad8b729a 100644
--- a/public/css/theme/simple.css
+++ b/public/css/theme/simple.css
@@ -338,7 +338,8 @@ h3 {
   box-shadow: none;
 }
 #noteItemList .item-setting,
-#noteItemList .item-blog {
+#noteItemList .item-blog,
+#noteItemList .item-star {
   position: absolute;
   right: 1px;
   font-size: 10px;
@@ -352,21 +353,36 @@ h3 {
   background-color: #464C5E;
 }
 #noteItemList .item-setting .fa,
-#noteItemList .item-blog .fa {
-  color: #fff !important;
+#noteItemList .item-blog .fa,
+#noteItemList .item-star .fa {
+  color: #fff;
 }
 #noteItemList .item-setting:hover,
-#noteItemList .item-blog:hover {
+#noteItemList .item-blog:hover,
+#noteItemList .item-star:hover {
   opacity: 0.8;
 }
 #noteItemList .item-blog {
   top: 1px;
+  display: none;
 }
 #noteItemList .item-setting {
   bottom: 0;
   display: none;
 }
-#noteItemList .item:hover .item-setting {
+#noteItemList .item-star {
+  bottom: 0;
+  right: 23px;
+  display: none;
+}
+#noteItemList .item-is-star .item-star .fa:before {
+  content: "\f005";
+}
+#noteItemList .item-is-star .item-star .fa {
+  color: yellow !important;
+}
+#noteItemList .item:hover .item-setting,
+#noteItemList .item:hover .item-star {
   display: block;
 }
 .friend-header {
@@ -837,6 +853,10 @@ h3 {
 }
 .item-active .fa,
 #noteItemList .item-active:hover .fa {
+  color: #eee;
+}
+.item-active .item-info .fa,
+#noteItemList .item-active:hover .item-info .fa {
   color: #eee !important;
 }
 .item-active .item-title,
@@ -1136,6 +1156,37 @@ h3 {
   line-height: 36px;
   color: #ccc;
 }
+#starNotes li {
+  position: relative;
+  margin: 0;
+  height: 30px;
+  border-bottom: 1px dashed #eee;
+}
+#starNotes li.selected {
+  background: #eee;
+}
+#starNotes li a {
+  padding-left: 20px;
+  line-height: 30px;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#starNotes li .delete-star {
+  position: absolute;
+  right: 10px;
+  bottom: 0;
+  color: #ccc;
+  display: none;
+  cursor: pointer;
+}
+#starNotes li .delete-star:hover {
+  color: #000;
+}
+#starNotes li:hover .delete-star {
+  display: block;
+}
 ::selection {
   background: #000000;
   color: #ffffff;
diff --git a/public/css/theme/writting-overwrite.css b/public/css/theme/writting-overwrite.css
index 92f923df..a6b99bc0 100644
--- a/public/css/theme/writting-overwrite.css
+++ b/public/css/theme/writting-overwrite.css
@@ -338,7 +338,8 @@ h3 {
   box-shadow: none;
 }
 #noteItemList .item-setting,
-#noteItemList .item-blog {
+#noteItemList .item-blog,
+#noteItemList .item-star {
   position: absolute;
   right: 1px;
   font-size: 10px;
@@ -352,21 +353,36 @@ h3 {
   background-color: #464C5E;
 }
 #noteItemList .item-setting .fa,
-#noteItemList .item-blog .fa {
-  color: #fff !important;
+#noteItemList .item-blog .fa,
+#noteItemList .item-star .fa {
+  color: #fff;
 }
 #noteItemList .item-setting:hover,
-#noteItemList .item-blog:hover {
+#noteItemList .item-blog:hover,
+#noteItemList .item-star:hover {
   opacity: 0.8;
 }
 #noteItemList .item-blog {
   top: 1px;
+  display: none;
 }
 #noteItemList .item-setting {
   bottom: 0;
   display: none;
 }
-#noteItemList .item:hover .item-setting {
+#noteItemList .item-star {
+  bottom: 0;
+  right: 23px;
+  display: none;
+}
+#noteItemList .item-is-star .item-star .fa:before {
+  content: "\f005";
+}
+#noteItemList .item-is-star .item-star .fa {
+  color: yellow !important;
+}
+#noteItemList .item:hover .item-setting,
+#noteItemList .item:hover .item-star {
   display: block;
 }
 .friend-header {
@@ -837,6 +853,10 @@ h3 {
 }
 .item-active .fa,
 #noteItemList .item-active:hover .fa {
+  color: #eee;
+}
+.item-active .item-info .fa,
+#noteItemList .item-active:hover .item-info .fa {
   color: #eee !important;
 }
 .item-active .item-title,
@@ -1136,6 +1156,37 @@ h3 {
   line-height: 36px;
   color: #ccc;
 }
+#starNotes li {
+  position: relative;
+  margin: 0;
+  height: 30px;
+  border-bottom: 1px dashed #eee;
+}
+#starNotes li.selected {
+  background: #eee;
+}
+#starNotes li a {
+  padding-left: 20px;
+  line-height: 30px;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#starNotes li .delete-star {
+  position: absolute;
+  right: 10px;
+  bottom: 0;
+  color: #ccc;
+  display: none;
+  cursor: pointer;
+}
+#starNotes li .delete-star:hover {
+  color: #000;
+}
+#starNotes li:hover .delete-star {
+  display: block;
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
diff --git a/public/css/theme/writting.css b/public/css/theme/writting.css
index a798ef57..e776a6d3 100644
--- a/public/css/theme/writting.css
+++ b/public/css/theme/writting.css
@@ -338,7 +338,8 @@ h3 {
   box-shadow: none;
 }
 #noteItemList .item-setting,
-#noteItemList .item-blog {
+#noteItemList .item-blog,
+#noteItemList .item-star {
   position: absolute;
   right: 1px;
   font-size: 10px;
@@ -352,21 +353,36 @@ h3 {
   background-color: #464C5E;
 }
 #noteItemList .item-setting .fa,
-#noteItemList .item-blog .fa {
-  color: #fff !important;
+#noteItemList .item-blog .fa,
+#noteItemList .item-star .fa {
+  color: #fff;
 }
 #noteItemList .item-setting:hover,
-#noteItemList .item-blog:hover {
+#noteItemList .item-blog:hover,
+#noteItemList .item-star:hover {
   opacity: 0.8;
 }
 #noteItemList .item-blog {
   top: 1px;
+  display: none;
 }
 #noteItemList .item-setting {
   bottom: 0;
   display: none;
 }
-#noteItemList .item:hover .item-setting {
+#noteItemList .item-star {
+  bottom: 0;
+  right: 23px;
+  display: none;
+}
+#noteItemList .item-is-star .item-star .fa:before {
+  content: "\f005";
+}
+#noteItemList .item-is-star .item-star .fa {
+  color: yellow !important;
+}
+#noteItemList .item:hover .item-setting,
+#noteItemList .item:hover .item-star {
   display: block;
 }
 .friend-header {
@@ -837,6 +853,10 @@ h3 {
 }
 .item-active .fa,
 #noteItemList .item-active:hover .fa {
+  color: #eee;
+}
+.item-active .item-info .fa,
+#noteItemList .item-active:hover .item-info .fa {
   color: #eee !important;
 }
 .item-active .item-title,
@@ -1136,6 +1156,37 @@ h3 {
   line-height: 36px;
   color: #ccc;
 }
+#starNotes li {
+  position: relative;
+  margin: 0;
+  height: 30px;
+  border-bottom: 1px dashed #eee;
+}
+#starNotes li.selected {
+  background: #eee;
+}
+#starNotes li a {
+  padding-left: 20px;
+  line-height: 30px;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#starNotes li .delete-star {
+  position: absolute;
+  right: 10px;
+  bottom: 0;
+  color: #ccc;
+  display: none;
+  cursor: pointer;
+}
+#starNotes li .delete-star:hover {
+  color: #000;
+}
+#starNotes li:hover .delete-star {
+  display: block;
+}
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
diff --git a/public/js/app/note.js b/public/js/app/note.js
index 29bd8c4e..e143c3e1 100644
--- a/public/js/app/note.js
+++ b/public/js/app/note.js
@@ -11,7 +11,9 @@ Note.curNoteId = "";
 
 Note.interval = ""; // 定时器
 
-Note.itemIsBlog = '<div class="item-blog"><i class="fa fa-bold" title="blog"></i></div><div class="item-setting"><i class="fa fa-cog" title="setting"></i></div>';
+// 这里, settings, blog, star
+Note.itemIsBlog = '<div class="item-blog"><i class="fa fa-bold" title="blog"></i></div><div class="item-star"><i class="fa fa-star-o" title="Star"></i></div><div class="item-setting"><i class="fa fa-cog" title="setting"></i></div>';
+
 // for render
 Note.itemTplNoImg = '<li href="#" class="item ?" noteId="?">'
 Note.itemTplNoImg += Note.itemIsBlog +'<div class="item-desc"><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
@@ -22,7 +24,7 @@ Note.itemTpl +=Note.itemIsBlog + '<div class="item-desc" style=""><p class="item
 
 // for new
 Note.newItemTpl = '<li href="#" class="item item-active ?" fromUserId="?" noteId="?">'
-Note.newItemTpl += Note.itemIsBlog + '<div class="item-desc" style="right: 0px;"><p class="item-title">?</p><p class="item-text"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span><br /><span class="desc">?</span></p></div></li>';
+Note.newItemTpl += Note.itemIsBlog + '<div class="item-desc" style="right: 0px;"><p class="item-title">?</p><p class="item-info"><i class="fa fa-book"></i> <span class="note-notebook">?</span> <i class="fa fa-clock-o"></i> <span class="updated-time">?</span></p><p class="desc">?</p></div></li>';
 
 Note.noteItemListO = $("#noteItemList");
 
@@ -482,10 +484,14 @@ Note.startUpdatePoolNoteInterval = function() {
 };
 
 
-// 样式
+// 选中note
 Note.selectTarget = function(target) {
 	$(".item").removeClass("item-active");
 	$(target).addClass("item-active");
+
+	// 判断是否在star中
+	var noteId = $(target).attr('noteId');
+	Note.selectStar(noteId);
 }
 
 // 改变note
@@ -677,7 +683,7 @@ Note.renderChangedNote = function(changedNote) {
 	if(!changedNote) {
 		return;
 	}
-	
+
 	// 找到左侧相应的note
 	var $leftNoteNav = $(tt('[noteId="?"]', changedNote.NoteId));
 	if(changedNote.Title) {
@@ -700,6 +706,9 @@ Note.renderChangedNote = function(changedNote) {
 		$leftNoteNav.find(".item-thumb").remove(); // 以前有, 现在没有了
 		$leftNoteNav.removeClass("item-image");
 	}
+
+	// 如果标题改了, 如果也在star列表中, 那也要改star的标题啊
+	Note.changeStarNoteTitle(changedNote);
 }
 
 // 清空右侧note信息, 可能是共享的, 
@@ -869,10 +878,16 @@ Note._getNoteHtmlObjct = function(note, isShared) {
 	} else {
 		tmp = tt(Note.itemTplNoImg, classes, note.NoteId, note.Title, Notebook.getNotebookTitle(note.NotebookId), goNowToDatetime(note.UpdatedTime), note.Desc);
 	}
+	// blog ?
 	if(!note.IsBlog) {
 		tmp = $(tmp);
 		tmp.find(".item-blog").hide();
 	}
+	// star ?
+	if(note.Star) {
+		$(tmp).addClass('item-is-star');
+	}
+
 	return tmp;
 },
 Note._renderNotes = function(notes, forNewNote, isShared, tang) { // 第几趟
@@ -898,6 +913,10 @@ Note._renderNotes = function(notes, forNewNote, isShared, tang) { // 第几趟
 			tmp = $(tmp);
 			tmp.find(".item-blog").hide();
 		}
+		// star ?
+		if(note.Star) {
+			$(tmp).addClass('item-is-star');
+		}
 		if(note.ConflictNoteId) {
 			$(tmp).addClass('item-conflict');
 		}
@@ -1478,6 +1497,91 @@ Note.deleteNoteTag = function(item, tag) {
 	}
 };
 
+// 渲染列表
+Note.starNotes = [];
+Note.starItemT = '<li data-id="?"><a>?<span class="delete-star" title="Remove">X</span></a></li>';
+Note.starNotesO = $('#starNotes');
+Note.renderStars = function(notes) {
+	var me = this;
+	var notes = notes || me.starNotes;
+	me.starNotes = notes;
+	me.starNotesO.html('');
+	for(var i = 0; i < notes.length; ++i) {
+		var note = notes[i];
+		var t = tt(me.starItemT, note.NoteId, note.Title);
+		me.starNotesO.append(t);
+	}
+
+
+};
+
+// 点击笔记, 判断是否在star中, 如果在, 则也选中
+Note.selectStar = function(noteId) {
+	var me = this;
+	var target = me.starNotesO.find('li[data-id="' + noteId + '"]');
+	me.starNotesO.find('li').removeClass('selected');
+	target.addClass('selected');
+};
+
+// 点击, note
+Note.renderStarNote = function(target) {
+	var me = this;
+	var noteId = target.data('id');
+	me.starNotesO.find('li').removeClass('selected');
+	target.addClass('selected');
+
+	// 把当前笔记放在第一位
+	me.clearAll();
+	me.renderNotes(me.starNotes);
+	me.changeNoteForPjax(noteId, true, false);
+	me.directToNote(noteId);
+
+	// $('#curNotebookForLisNote').text("Starred");
+	Notebook.changeCurNotebookTitle('Starred', true);
+};
+
+// 笔记标签改了后, 如果在star中, 则也要改标题
+Note.changeStarNoteTitle = function(note) {
+	var me = this;
+	var cacheNote = me.getNote(note.NoteId);
+	if(!cacheNote.Star) {
+		return;
+	}
+	var target = me.starNotesO.find('li[data-id="' + note.NoteId + '"]');
+	target.find('a').text(note.Title);
+};
+
+// 收藏或取消收藏
+Note.star = function(noteId) {
+	var me = this;
+	var note = me.getNote(noteId);
+	if(!note) { 
+		return;
+	}
+	var $target = $('[noteId="' + noteId + '"]');
+	NoteService.star(noteId, function(ok, isStarred) {
+		if(ok) {
+			note.Star = isStarred;
+			if(isStarred) {
+				me.starNotes.unshift(note);
+				$target.addClass('item-is-star');
+			} else {
+				$target.removeClass('item-is-star');
+				// 删除该stars
+				for(var i  = 0; i < me.starNotes.length; ++i) {
+					var tNote = me.starNotes[i];
+					if(tNote.NoteId == noteId) { 
+						me.starNotes.splice(i, 1);
+						break;
+					}
+				}
+			}
+
+			// 重新渲染之
+			me.renderStars(me.starNotes);
+		}
+	});
+};
 
 // 这里速度不慢, 很快
 Note.getContextNotebooks = function(notebooks) {
@@ -1989,6 +2093,29 @@ $(function() {
 		var $p = $(this).parent();
 		Note.contextmenu.showMenu(e, $p);
 	});
+
+	// 收藏
+	$("#noteItemList").on("click", ".item-my .item-star", function(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		var $li = $(this).closest('li');
+		var noteId = $li.attr('noteId');
+		Note.star(noteId);
+	});
+
+	// 取消收藏
+	Note.starNotesO.on('click', '.delete-star', function(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		var $li = $(this).closest('li');
+		var noteId = $li.data('id');
+		Note.star(noteId);
+	});
+	Note.starNotesO.on('click', 'a', function(e) {
+		var $li = $(this).closest('li');
+		Note.renderStarNote($li);
+	});
+
 });
 
 // 定时器启动
diff --git a/public/js/app/notebook.js b/public/js/app/notebook.js
index dfd6c78e..f5afb87d 100644
--- a/public/js/app/notebook.js
+++ b/public/js/app/notebook.js
@@ -584,7 +584,7 @@ Notebook.changeNotebookNav = function(notebookId) {
 	}
 	
 	// 2
-	$("#curNotebookForListNote").html(notebook.Title);
+	Notebook.changeCurNotebookTitle(notebook.Title);
 	
 	// 3
 	Notebook.changeNotebookNavForNewNote(notebookId, notebook.Title);
@@ -686,7 +686,14 @@ Notebook.changeNotebook = function(notebookId, callback) {
 		}
 		// ajaxGet(url, param, );
 	})(me.changeNotebookSeq);
-}
+};
+
+// 改变标签, isStarred是否是星笔记本
+Notebook.changeCurNotebookTitle = function(title, isStarred) {
+	var me = this;
+	$("#curNotebookForListNote").html(title);
+	me.isStarred = isStarred;
+};
 
 // 笔记列表与编辑器的mask loading
 Notebook.showNoteAndEditorLoading = function() {
diff --git a/public/js/app/page.js b/public/js/app/page.js
index 25db299e..4b7e74a3 100644
--- a/public/js/app/page.js
+++ b/public/js/app/page.js
@@ -1332,6 +1332,10 @@ function initPage() {
 					Notebook.selectNotebook($(tt('#notebook [notebookId="?"]', Notebook.allNotebookId)));
 				}
 			});
+			// 获取star笔记
+			NoteService.getStarNotes(function(notes) {
+				Note.renderStars(notes);
+			});
 
 			// 指定笔记, 也要保存最新笔记
 			if(latestNotes.length > 0) {