使用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、数据库：

好不容易照着书写完了，才发现火狐根本用不了这种数据库。只能用谷歌来显示一下，惨兮兮。不过也算是一种体验了