FlowNote/index.html at master · lyiran/FlowNote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FlowNote</title>
	<link rel="stylesheet" href="styles/reset.css">
	<link rel="stylesheet" href="styles/main.css" type="text/css">
	<script src="js/jquery.min.js"></script>
	<script>
		var fnote={};
	</script>
	<script src="js/fnote.fake.js"></script>
	<script>
	// 	console.log(fnote.fake.getNotebookList());
	// 	console.log(fnote.fake.getNoteList(5));
	// 	console.log(fnote.fake.getContent(1));
	// 	console.log(fnote.fake.getNote(1));
	</script>
</head>
<body>
	<div class="left-wrap">
		<div class="title">
			<h1>笔记本</h1>
		</div>
	    <ul class="book-list">
<!-- 	    	<li class="book-item" onclick="showNotes(this)" bookid="">
	    		<h3>设计<span>(234)</span></h3>
	    	</li> -->
	    </ul>
	   	<a href="#" class="new-book"></a>
	   	<a href="#" class="del-book"></a>
	</div>
	<!-- 中间栏布局 -->
	<div class="mid-wrap">
		<div class="title">
			<div>
				<h1>笔记<span class= "new-note">新建笔记</span></h1>
			</div>
		</div>
		<div class="note-list">
			<ul>
				<li class="note-item">
					<h3>图片排版</h3>
					<p>如果两张图片风格、内容色调相机，颜色的安排符合某种规律，那么观众的眼睛就会非常流畅的路过你的图片，走向下一个关注点。</p>
				</li>
				<li class="note-item">
					<h3>图片排版</h3>
					<p>如果两张图片风格、内容色调相机，颜色的安排符合某种规律，那么观众的眼睛就会非常流畅的路过你的图片，走向下一个关注点。</p>
				</li>
				<li class="note-item">
					<h3>图片排版</h3>
					<p>如果两张图片风格、内容色调相机，颜色的安排符合某种规律，那么观众的眼睛就会非常流畅的路过你的图片，走向下一个关注点。</p>
				</li>
			</ul>
		</div>
	</div>
  <div class="right-content">
  	<div class="title">
  		<a href="#" class="del-note"></a>
  		<h1 class="note-title">FlowNote</h1>
  	</div>
  	<textarea class="note-content">

  	</textarea>
  </div>
	<script>
	/**
	 * 文档加载完成执行函数
	 * 功能：显示笔记本列表
	 */
	$(function(){
		var bookList = fnote.fake.getNotebookList();
		for(var i = 0, len = bookList.length; i < len; i++){
			var book = bookList[i];
			var s = '<li class="book-item" onclick="showNotes(this)" bookid="'+book.id+'">'+
								'<h3>'+book.name+'<span>('+book.note_count+')</span></h3>'+
							'</li>';
			$(".book-list").append(s);
		}
		/**
		 * 为笔记本列添加交互效果,如鼠标滑过；点击响应
		 */
		$(".book-item").mouseenter(function(){
			$(this).addClass("book-item-enter");
		});
		$(".book-item").mouseleave(function(){
			$(this).removeClass("book-item-enter");
		});
		$(".book-item").click(function(){
			$(".book-item").removeClass("book-item-on");
			$(this).addClass("book-item-on");
		});
		/**
		 * 为笔记列添加交互效果,如鼠标滑过；点击响应
		 */
		$(".note-item").click(function(){
			$(".note-item-on").removeClass("note-item-on");
			$(this).addClass("note-item-on");
		});
	});
	function showNotes(li){
		var o = $(li);
		var bookId = o.attr("bookid");
		var notes = fnote.fake.getNoteList(bookId);
		// for(var i = 0, len = bookList.length; i < len; i++){
		// 	var book = bookList[i];
		// 	var s = '<li class="book-item" onclick="showNotes(this)" bookid="'+book.id+'">'+
		// 						'<h3>'+book.name+'<span>('+book.note_count+')</span></h3>'+
		// 					'</li>';
		// 	$(".book-list").append(s);
		// }

	}
	</script>
</body>
</html>