威海職業學院 張淑紅
基于HTML5的手機端記事本設計
威海職業學院 張淑紅
本文介紹了一款基于HTML5的手機端記事本的設計,主要采用了HTML5的Web SQL Databases和jQuery技術完成記事本的新建、記事、刪除等功能。
html5;jQuery;JavaScript;記事本
HTML5引入Web SQLDatabase概念,它使用SQL來操縱客戶端數據庫的API,所以可以使用SQL語句可以實現本地數據庫、表的創建,數據的增刪改查等功能,主要有以下三個核心方法。
(1)創建并打開數據庫:openDatabase。
(2)控制事務提交或回滾:transaction。
(3)執行SQL查詢:executeSql。
因此,在HTML5發展迅速的今天,無論是PC還是移動設備,HTML5是未來的趨勢。為了更好地體現HTML5的優勢,本文實現了使用HTML5 Web SQL數據庫結合jQuery設計制作網頁版記事本。
根據實際需要,記事本的界面共包含記事列表、新增記事、記事詳細信息三個部分,其中“新增記事”和“記事詳細信息”兩部分屬于彈出框,根據時間的觸發而彈出,記事本頁面顯示如圖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文件。
界面設計完成后,使用本地數據庫和jQuery實現記事本的各種功能。
(1)數據庫的創建和打開,并創建note表,存放記事信息,關鍵代碼如下:

(2)記事本列表項的實現
通過查詢數據庫,將查詢到的結果追加到<li>標簽中。

(3)新增功能實現
通過SQL語句將新增數據添加到數據庫,并重新調用列表函數,最后……