基于HTML5的手機端記事本設計

威海職業學院 張淑紅

基于HTML5的手機端記事本設計

威海職業學院 張淑紅

本文介紹了一款基于HTML5的手機端記事本的設計，主要采用了HTML5的Web SQL Databases和jQuery技術完成記事本的新建、記事、刪除等功能。

html5；jQuery；JavaScript；記事本

1 HTML5本地數據庫概述

HTML5引入Web SQLDatabase概念，它使用SQL來操縱客戶端數據庫的API，所以可以使用SQL語句可以實現本地數據庫、表的創建，數據的增刪改查等功能，主要有以下三個核心方法。

（1）創建并打開數據庫：openDatabase。

（2）控制事務提交或回滾：transaction。

（3）執行SQL查詢：executeSql。

因此，在HTML5發展迅速的今天，無論是PC還是移動設備，HTML5是未來的趨勢。為了更好地體現HTML5的優勢，本文實現了使用HTML5 Web SQL數據庫結合jQuery設計制作網頁版記事本。

2 記事本界面設計

根據實際需要，記事本的界面共包含記事列表、新增記事、記事詳細信息三個部分，其中“新增記事”和“記事詳細信息”兩部分屬于彈出框，根據時間的觸發而彈出，記事本頁面顯示如圖1所示。

圖1

新增記事和記事詳細信息頁面，如圖2、3所示。

圖2 新增記事信息圖和詳細記事信息圖

圖3 新增記事信息圖和詳細記事信息圖

另外，為了控制布局，需要引入用于mobile布局的css文件“jquery.mobile.structure-1.4.2.min.css”；同時，還需要引入“jquery-1. 9.1.min.js”和“jquery.mobile-1.4.0.min.js”兩個js文件。

3 記事本功能實現

界面設計完成后，使用本地數據庫和jQuery實現記事本的各種功能。

（1）數據庫的創建和打開，并創建note表，存放記事信息，關鍵代碼如下：

（2）記事本列表項的實現

通過查詢數據庫，將查詢到的結果追加到＜li＞標簽中。

（3）新增功能實現

通過SQL語句將新增數據添加到數據庫，并重新調用列表函數，最后……