威海職業(yè)學(xué)院 張淑紅

基于HTML5的手機(jī)端記事本設(shè)計(jì)

威海職業(yè)學(xué)院 張淑紅

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

html5；jQuery；JavaScript；記事本

1 HTML5本地?cái)?shù)據(jù)庫概述

HTML5引入Web SQLDatabase概念，它使用SQL來操縱客戶端數(shù)據(jù)庫的API，所以可以使用SQL語句可以實(shí)現(xiàn)本地?cái)?shù)據(jù)庫、表的創(chuàng)建，數(shù)據(jù)的增刪改查等功能，主要有以下三個(gè)核心方法。

（1）創(chuàng)建并打開數(shù)據(jù)庫：openDatabase。

（2）控制事務(wù)提交或回滾：transaction。

（3）執(zhí)行SQL查詢：executeSql。

因此，在HTML5發(fā)展迅速的今天，無論是PC還是移動設(shè)備，HTML5是未來的趨勢。為了更好地體現(xiàn)HTML5的優(yōu)勢，本文實(shí)現(xiàn)了使用HTML5 Web SQL數(shù)據(jù)庫結(jié)合jQuery設(shè)計(jì)制作網(wǎng)頁版記事本。

2 記事本界面設(shè)計(jì)

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

圖1

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

圖2 新增記事信息圖和詳細(xì)記事信息圖

圖3 新增記事信息圖和詳細(xì)記事信息圖

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

3 記事本功能實(shí)現(xiàn)

界面設(shè)計(jì)完成后，使用本地?cái)?shù)據(jù)庫和jQuery實(shí)現(xiàn)記事本的各種功能。

（1）數(shù)據(jù)庫的創(chuàng)建和打開，并創(chuàng)建note表，存放記事信息，關(guān)鍵代碼如下：

（2）記事本列表項(xiàng)的實(shí)現(xiàn)

通過查詢數(shù)據(jù)庫，將查詢到的結(jié)果追加到＜li＞標(biāo)簽中。

（3）新增功能實(shí)現(xiàn)

通過SQL語句將新增數(shù)據(jù)添加到數(shù)據(jù)庫，并重新調(diào)用列表函數(shù)，最后關(guān)閉新增“對話框”，關(guān)鍵代碼如下：

（4）刪除功能實(shí)現(xiàn)

通過sql語句刪除對應(yīng)的信息，并重新調(diào)用列表函數(shù)，關(guān)鍵代碼如下：

4 結(jié)束語

HTML5本地?cái)?shù)據(jù)庫的使用，使得HTML成為Web開發(fā)者的強(qiáng)力工具，將會改變現(xiàn)有的數(shù)據(jù)存儲方式，最終將Web帶入一個(gè)更加成熟的應(yīng)用平臺。

[1]明日科技.HTML5從入門到精通[M].北京：清華大學(xué)出版社,2014．

[2]陳婉凌.HTML5+CSS3+jQuery Mobile輕松構(gòu)建APP與移動網(wǎng)站[M].北京：清華大學(xué)出版社,2010．

[3]馬新強(qiáng),孫兆.Web標(biāo)準(zhǔn)與HTML5的核心技術(shù)研究.重慶文理學(xué)院學(xué)報(bào) (自然科學(xué)版),2010年12月第29卷第6期：61-64.