MyNote/index.html at master · Charles953/MyNote · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html>
<head>
<title>记事本NoteApp</title>
<!--最佳化屏幕宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--引用jQuery Mobile函数库  应用ThemeRoller制作的样式-->
<link rel="stylesheet" href="themes/sweet.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.2.min.css" />
<script src="jquery/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>

<style>
#header{height:50px;font-size:25px;font-family:"微软雅黑"}
.css_btn_class {
	float: left;
	padding: 0.6em;
	position:relative;
	display:block;
	z-index:10;
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #e65f44;
	padding:8px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
	background:-ms-linear-gradient( top, #f0c911 5%, #f2ab1e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f0c911), color-stop(100%, #f2ab1e) );
	background-color:#f0c911;
	color:#c92200;
	text-shadow:1px 1px 0px #ded17c;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #f9eca0;
 	-moz-box-shadow:inset 1px 1px 0px 0px #f9eca0;
 	box-shadow:inset 1px 1px 0px 0px #f9eca0;
}.css_btn_class:hover {
	background:-moz-linear-gradient( center top, #f2ab1e 5%, #f0c911 100% );
	background:-ms-linear-gradient( top, #f2ab1e 5%, #f0c911 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f2ab1e), color-stop(100%, #f0c911) );
	background-color:#f2ab1e;
}.css_btn_class:active {
	position:relative;
	top:1px;
}
</style>
<script type="text/javascript">
var db;
$(function(){

			//打开数据库
			 var dbSize=2*1024*1024;
			 db = openDatabase('todo', '', '', dbSize);

			db.transaction(function(tx){
				//创建数据表
				tx.executeSql("CREATE TABLE IF NOT EXISTS notes (id integer PRIMARY KEY,title char(50),inputMemo text,last_date datetime)");

			});

		//显示列表
		noteList();

		//显示新增页面
		$("#new").on("click",addnew);
		function addnew(){
			$.mobile.changePage("#addNote",{});
		}
		$("#addNote").on("pageshow",function(){
			$("#inputMemo").val("");
			$("#title").val("");
			$("#title").focus();
		});
//		$("#editNote").on("click",editNote);
//		function editNote(){
//			$.mobile.changePage("#editNote",{});
//		}

		//新增
		$("#save").on("click",save);
		function save(){
				var title = $("#title").val();
				var inputMemo = $("#inputMemo").val();

				db.transaction(function(tx){
					//新增数据
					tx.executeSql("INSERT INTO notes(title,inputMemo,last_date) values(?,?,datetime('now', 'localtime'))",[title,inputMemo],function(tx, result){
						 $('.ui-dialog').dialog('close');
						 noteList();
					},function(e){
						 alert("新增数据错误:"+e.message)
					});
				});
		}
		//编辑
		$("#edit").on("click",edit);
		function edit(){
			$("#editTitle").val("");
			$("#editMemo").val("");

			var value=parseInt($(this).attr('id'));

			db.transaction(function(tx){
				//显示customer数据表全部数据
				tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes where id=?",[value], function(tx, result){
					if(result.rows.length>0){
						for(var i = 0; i < result.rows.length; i++){
							item = result.rows.item(i);
							$("#editTitle").val(item["title"]);
							$("#editMemo").val(item["inputMemo"]);
							$("#last_date_edit").html("最后修改日期："+item["last_date"]);
							$("#editSave").attr("id", item["id"]);
						}
					}
					$.mobile.changePage("#editNode",{});
				},function(e){
					alert("SELECT语法出错了!"+e.message)
				});
			});
		}
		//修改
		$("#editSave").on("click",editSave);
		function editSave(){
				var title = $("#editTitle").val();
				var inputMemo = $("#editMemo").val();

				var value=parseInt($(this).attr('id'));
				console.log(title,inputMemo,value);
				db.transaction(function(tx){
					//新增数据
					tx.executeSql("UPDATE notes SET title=?,inputMemo=?,last_date=datetime('now', 'localtime') where id=?",[title,inputMemo,value],function(tx, result){
						 $.mobile.changePage("#home",{});
						 noteList();
					},function(e){
						 alert("修改数据错误:"+e.message)
					});
				});
		}
		//显示详细信息
		$('#list').on('click', 'li',show);
		function show(){
			$("#viewTitle").html("");
			$("#viewMemo").html("");

			var value=parseInt($(this).attr('id'));

			db.transaction(function(tx){
				//显示customer数据表全部数据
				tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes where id=?",[value], function(tx, result){
					if(result.rows.length>0){
						for(var i = 0; i < result.rows.length; i++){
							item = result.rows.item(i);
							$("#viewTitle").html(item["title"]);
							$("#viewMemo").html(item["inputMemo"]);
							$("#last_date").html("创建日期："+item["last_date"]);
							$("#edit").attr("id", item["id"]);
						}
					}
					$.mobile.changePage("#viewNote",{});
				},function(e){
					alert("SELECT语法出错了!"+e.message)
				});
			});

		}

		//显示list刪除按钮
		$("#del").on("click",showdelbtn);
		function showdelbtn(){
			if($("button").length<=0){
					var DeleteBtn = $("<button class='css_btn_class'>Delete</button>");
                   $("li:visible").before(DeleteBtn);
			}
		}
		//单击list刪除按钮
		$("#home").on('click','.css_btn_class', function(){
			if(confirm("确定要执行刪除?")){
				var value=$(this).next("li").attr("id");
				db.transaction(function(tx){
					//显示customer数据表全部数据
					tx.executeSql("DELETE FROM notes WHERE id=?",[value], function(tx, result){
						noteList();
					},function(e){
						alert("DELETE语法出错了!"+e.message)
						 $("button").remove();
					});
				});
			}
		});


	//列表
		function noteList(){
			$("ul").empty();
			var note="";

			db.transaction(function(tx){
				//显示notes数据表全部数据
				tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes",[], function(tx, result){
					if(result.rows.length>0){
						for(var i = 0; i < result.rows.length; i++){
							item = result.rows.item(i);
							note+="<li id="+item["id"]+"><a href='#'><h3>"+item["title"]+"</h3><p>"+item["inputMemo"]+"</p></a></li>";
						}
					}
					$("#list").append(note);
					$("#list").listview('refresh');
				},function(e){
					alert("SELECT语法出错了!"+e.message)
				});
			});
		}
});

</script>
</head>
<body>
<!--首页记事列表-->
<div data-role="page" id="home">
  <div data-role="header" id="header">
  <a href="#" data-icon="delete" id="del">刪除</a>
    <h1>备忘记事本</h1>
    <a href="#" data-icon="plus" class="ui-btn-right" id="new">新增记事</a></div>
  <div data-role="content">
     <ul id="list" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="快速搜索"></ul>
  </div>
</div>

<!--新增记事-->
<div data-role="dialog" id="addNote">
  <div data-role="header">
    <h1>新增记事</h1>
  </div>
  <div data-role="content">
	<input type="text" id="title">
    <textarea cols="40" rows="8" id="inputMemo"></textarea>
    <hr>
    <a href="#" data-role="button" id="save">保存</a> </div>
</div>

<!--记事详细信息-->
<div data-role="dialog" id="viewNote">
  <div data-role="header">
    <h1 id="viewTitle">记事</h1>
  </div>
  <div data-role="content">
    <p id="viewMemo">内容</p>
  </div>
  <div data-role="footer">
    <p id="last_date">日期</p>
    <a href="#" data-role="button" id="edit">编辑</a>
  </div>
</div>

<!--编辑记事-->
<div data-role="dialog" id="editNode">
  <div data-role="header">
    <h1>编辑记事</h1>
  </div>
  <div data-role="content">
	<input type="text" id="editTitle">
    <textarea cols="40" rows="8" id="editMemo"></textarea>
    <p id="last_date_edit"></p>
    <hr>
    <a href="#" data-role="button" id="editSave">保存</a>
  </div>
</div>
</body>
</html>