使用jquery.mobile和WebSQL實現記事本功能

標籤：

1、記事本列表頁

1.1、頁面結構與樣式：

<div data-role="page" id="home">    <div data-role="header">        <a href="javascript:void(0);" data-icon="delete" id="del">刪除</a>        <h2>記事本</h2>        <a href="javascript:void(0);" 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>

1.2、功能指令碼：

$(function () {     var db;　　　　 //設定資料庫        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();       })    //顯示列表    function noteList() {        $("ul").empty();        var note = "";        db.transaction(function (tx) {            //顯示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("尋找出錯：" + e.message);                    }            );        });    };    

1.3、顯示結果：

 

2、顯示詳情

2.1、頁面結構與樣式：

<!--//記事詳情--><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>    </div></div>

2.2、功能指令碼：

    $("#list").on("click", "li", showinfo);    //顯示詳情    function showinfo(){        $("#viewTitle").html("");        $("#viewMemo").html("");        var value=parseInt($(this).attr("id"));        db.transaction(function (tx) {            //顯示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("建立日期："+ item["last_date"]);                            }                        }                        $.mobile.changePage("#viewNote",{});                    }, function (e) {                        alert("尋找出錯：" + e.message);                    }            );        });    };

2.3、顯示結果：

3、添加新記事

3.1、頁面結構與樣式：

<!--//新增頁--><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="javascript:void(0);" data-role="button" id="save">儲存</a>    </div></div>

3.2、功能指令碼：

//開啟新頁面//添加新記事    $("#new").on("click", addnew);    $("#addNote").on("pageshow", function ()             $("#title").val("");            $("#inputMemo").val("");            $("#title").focus();        });    //添加    function addnew() {        $.mobile.changePage("#addNote", {});//開啟新頁面    };

        $("#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);                    });        });    };

3.3、顯示結果：

4、刪除記事

4.1、功能指令碼：

        $("#del").on("click", showdelbtn);        $("#home").on("click", ".css_btn_class", function () {            if (confirm("確定執行刪除操作？")) {                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("刪除出錯：" + e.message);                        $("button").remove();                    });                });            }        });    //刪除按鈕    function showdelbtn() {        if ($("button").length <= 0) {            var DeleteBtn = $("<button>Delete</button>").prop({‘class‘: ‘css_btn_class‘});            $("li:visible").before(DeleteBtn);        }    };

4.2、顯示結果：

5、資料庫：

好不容易照著書寫完了，才發現Firefox根本用不了這種資料庫。只能用Google來顯示一下，慘兮兮。不過也算是一種體驗了

使用jquery.mobile和WebSQL實現記事本功能