HTML 5 實戰 之 使用HTML 5特征開發webapp應用

12.1Hello World 頁面的實現

示例

功能描述

使用HTML 5結構編寫一個jQuery Mobile 頁面,在頁面中輸出“Hello World!”字樣。

代碼編寫與效果演示à

源碼分析

在頁面代碼的頭部元素中,先通標記的“content”屬性設置頁面的寬度與模擬器的寬度相一致,以保證頁面可以在瀏覽器中完全填充,接下來,導入了三個框架性文件,需要注意它們導入時的順序。

在代碼的主體元素中,通過多個元素進行層次的劃分,因為在jQuery Mobile中,每個元素都是一個容器,根據指定的“data-role”屬性值,確定容器對應的身份,如屬性“data-role”的值為“header”,則該元素的為頭部區域。

data-role”屬性是HTML 5的一個新特征,通過設置該屬性,jQuery Mobile就可以很快地定位到指定的元素,并對內容進行相應的處理。

12.2:多頁面的切換

簡介

通過實例1可以知道,在jQuery Mobile中,如果將頁面元素的“data-role”屬性值設置為“page”,則該元素成為一個容器,即頁面的某塊區域。在一個頁面中,可以設置多個元素成為容器,雖然元素的“data-role”屬性值都為“page”,但它們對應的“Id”號則不允許相同。

jQuery Mobile 中,將一個頁面中的多個容器當作是多個不同的頁面,它們之間的界面切換是通過增加一個元素,并將該元素的“href”屬性值設為“#”加對應“Id”號的方式來進行。

示例

功能描述

使用HTML 5結構編寫一個jQuery Mobile 頁面,在頁面中設置兩個“page”區域,當單擊第一個區域中的“詳細頁”鏈接時,進入第二個區域;在第二個區域中,單擊“返回首頁”鏈接時,則又切換至第一個區域。

代碼編寫與效果演示à

源碼分析

jQuery Mobile中,針對一個頁面中多個“page”區域間的切換稱為內鏈接,其方式為添加一個元素,并將該元素的“href”屬性值設置為“#”加對應“Id”形式,如下所示:

詳細頁

上述代碼表示,單擊“詳細頁”鏈接字樣時,將切換到“Id”號為“page2”的區域中。除內鏈接外,還有一個外鏈接,所謂的外鏈接指定是通過單擊頁面中的某個鏈接字符,跳轉到另外一個頁面中,而不是在同一個頁面間的切換,其實現的方式與內鏈接相同,只是在元素中,增加了另外一個“rel”屬性,并將該屬性值設置為“external”,表示外鏈接,如下所示:

源碼分析(續)

詳細頁

上述代碼表示,單擊“詳細頁”鏈接字樣時,將跳轉至文件名“a1”的HTML頁面中。在頁面切換過程中,無論是內鏈接還是外鏈接,jQuery Mobile都支持以動畫的效果來進行,只需要在切換的元素中,再添加一個“data-transition”屬性,并選擇某種屬性值即可,如下所示:

詳細頁。

12.3:偵聽HTML 5畫布元素的觸摸事件

    示例

    功能描述

    新建一個HTML 頁面,在內容區域添加一個畫布元素。觸摸畫布 時,將在觸摸處繪制一個半徑為5的實體小圓心,同時在畫布的最上面,顯示此次觸摸時的坐標數據信息 。

   代碼編寫與效果演示à

 

源碼分析

在本實例的JavaScript代碼中,首先獲取頁面中的畫布元素并保存在變量“cnv”中,并通過畫布變量“cnv”取得畫布的上下文環境對象保存在變量“cxt”中。接下來,根據文檔顯示區的寬度與高度計算出畫布顯示時的寬度與高度,并分別保存在變量“w”和“h”中,再通過attr()方法將這兩個值賦予畫布元素。

然后,通過bind()方法綁定畫布元素的“tap”事件。在該事件中,先計算畫布元素在屏幕中的坐標距離并保存至變量“t”和“l”中?!?/span>l”表示橫坐標,在計算時該值時,先通過“offsetLeft”屬性獲取畫布元素的左邊距離,如果畫布元素還存在父容器,則通過“while”語句,將父容器的左邊距離與畫布元素的左邊距離相累加,并將最終值賦予變量“l”;“t”表示縱坐標,同樣道理,將計算后的畫布上邊距離最終值賦予變量“t”。另外,通過“tapX”、“tapY”兩個變量分別記錄觸摸畫布時返回的橫坐標與縱坐標的值。

源碼分析(續)

最后,開始畫圓。圓的橫坐標為觸摸事件返回的橫坐標值tapX”減除 畫布在屏幕中的橫坐標值“l”,因為“tapX”變量值包含“l”變量值,兩者相減后,就是畫布中圓的真實橫坐標值;同理,變量“tapY”與“t”相減后得到畫布中圓的真實縱坐標值;根據獲取的圓的坐標值,以5px為半徑,在畫布中,調用arc()方法,繪制一個360度的圓形,并通過fill()方法為圓形填充設置的顏色,再將圓形的坐標位置顯示通過元素顯示在頁面中。

12.4:使用localStorage傳遞鏈接參數

    示例

    功能描述

    新建一個HTML 頁面,添加兩個“page”容器。當在第一個容器中單擊“傳值”鏈接時,通過“localStorage”對象設置該值,頁面切換至第二個容器中,并顯示“localStorage”對象保存的值 。

   代碼編寫與效果演示à

源碼分析

在本實例的JavaScript代碼中,首先,定義一個名為“rttophtml5mobi”的對象,設置一些基礎的內容值,在接下來的“install”對象中,定義了兩個方法,一個為“setParam”,即調用“localStorage”對象中的setItem()方法設置參數名稱和值;另一個為“getParam”,即調用“localStorage”對象中的getItem()方法獲取設置的對應參數值。

然后,在page1”容器的“pagecreate”事件中,先獲取正文區域元素,并設置一個帶鏈接元素的字符串內容,將該內容顯示在元素中;同時,使用delegate()方法綁定鏈接元素的單擊事件,在該事件中,調用自定義的setParam()方法設置需要傳遞的參數值。

源碼分析(續)

最后,在page2”容器的“pagecreate”事件中,先獲取正文區域元素,然后調用自定義的getParam()方法獲取傳遞來的參數值,并將它顯示在元素中。

說明 在設置的鏈接字符串中,先為元素添加了一個data-id”屬性,該屬性可以修改為“data-”加任意字母的格式,然后,則可以通過調用data()方法,獲取該屬性的值 。


來源:私塾在線

上一篇: HTML 5 實戰 之 HTML 5中簡單小游戲的開發

下一篇: HTML 5 實戰 之 HTML 5中的重要元素與公共屬性

分享到: 更多
10分快3计划软件下载 全年无错36特威 新浪双色球基本走势图 北京pk10如何杀一码 时时彩龙虎合怎么追合 mg阿拉德之怒手游官网下载 大乐透电子投注单怎么用 好运来计划软件下载 中国体育彩票手机投注 s双色球开奖结果 北京pk10全天单期计划 双色最近100走势图 龙虎和平台 pk10免费计划软件怎么样 非凡炸金花老版本 彩神幸运飞艇冠军5码app