Using Jquery.mobile and Websql to implement Notepad functionality

1. Notepad List page

1.1. Page structure and style:

 
<div data-role="page" id="home">
<div data-role="header">
< a href = "javascript: void (0);" data icon = "delete" id = "del" > delete</a>
<h2>Notepad</h2>
< a href = "javascript: void (0);" data icon = "plus" class = "UI BTN right" id = "new" > Add</a>
</div>
<div data-role="content">
< UL id = "list" data role = "listview" data inset = "true" data filter = "true" data filter placeholder = "quick search" >
</ul>
</div>
</div>

1.2. Function Script:

$(function () {
Var db;
//Set up database
var dbsize = 2 * 2014 * 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 ();
}
//Show list
function noteList() {
$("ul").empty();
var note = "";
db.transaction(function (tx) {
/ / display list
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 ("find error:" + e.message);
}
);
};
}

1.3. Display Result:

2. Show Details

2.1. Page structure and style:

<! -- / / note details -- >
<div data-role="dialog" id="viewNote">
< div data role = "header" >
<div data-role="content">
< p id = "viewmemo" > content</p>
</div>
<div data-role="footer">
< p id = "last_date" > date</p>
</div>
</div> 

2.2. Function Script:

$("#list").on("click", "li", showinfo);
//Show details
function showinfo(){
$("#viewTitle").html("");
$("#viewMemo").html("");
var value=parseInt($(this).attr("id"));
db.transaction(function (tx) {
/ / display list
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 ("creation date:" + item ["last date")];
}
}
$.mobile.changePage("#viewNote",{});
}, function (e) {
Alert ("find error:" + e.message);
}
);
};
}

2.3. Display Result:

3. Add New Notes

3.1. Page structure and style:

New page -- >
<div data-role="dialog" id="addNote">
< div data role = "header" >
<div data-role="content">
<input type="text" id="title">
<textarea cols="40" rows="8" id="inputMemo"></textarea>
<hr>
< a href = "javascript: void (0);" data role = "button" id = "save" > save</a>
</div>
</div> 

3.2. Function Script:

//Open a new page
//Add a new note
$("#new").on("click", addnew);
$("#addNote").on("pageshow", function ()
$("#title").val("");
$("#inputMemo").val("");
$("#title").focus();
};
/ / add
function addnew() {
$. Mobile. Changepage ("ාaddnote", {}); / / open a new page
}
$("#save").on("click", save);
//New note
function save() {
var title = $("#title").val();
var inputMemo = $("#inputMemo").val();
db.transaction(function (tx) {
//New data
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 ("new data error:" + e.message);
};
};
} 

3.3. Display Result:

4. Delete Notes

4.1. Function Script:

$("#del").on("click", showdelbtn);
$("#home").on("click", ".css_btn_class", function () {
If (confirm ("are you sure to delete? {
var value = $(this).next("li").attr("id");
db.transaction(function (tx) {
tx.executeSql("DELETE FROM notes WHERE  id=?", [value], function (tx, result) {
NoteList ();
}, function (e) {
Alertmodal ("deletion error:" + e.message);
$("button").remove();
};
};
}
};
//Delete button
function showdelbtn() {
if ($("button").length <= 0) {
var DeleteBtn = $("<button>Delete</button>").prop({‘class‘: ‘css_btn_class‘});
$("li:visible").before(DeleteBtn);
}
} 

4.2. Display Result:

5. Database:

After finishing the writing, I found that Firefox could not use this kind of database. Can only use Google to show, miserable. But it's kind of an experience.

Using Jquery.mobile and Websql to implement Notepad functionality