第18章-使用jQuery-Mobile事件

18.1設(shè)置jQueryMobile在jQueryMobile中，框架的基本配置項(xiàng)是可以被修改的。由于配置項(xiàng)針對的是全局功能的使用，jQueryMobile在頁面加載到增強(qiáng)特征時就需要使用這些配置項(xiàng)，而這個加載過程早于document.ready事件的觸發(fā)，因此，在該事件中進(jìn)行修改是無效的，而要選擇更早的mobileinit事件，在該事件中，可以編寫新的配置項(xiàng)來覆蓋原有的基本配置項(xiàng)設(shè)置。

18.2

jQueryMobile事件在移動終端設(shè)備中，有一類事件無法觸發(fā)（如鼠標(biāo)事件或窗口事件），但它們又客觀存在。因此，在jQueryMobile中，借助框架的API將這類型的時間擴(kuò)展為專門用于移動終端設(shè)備的事件，如觸摸、設(shè)備翻轉(zhuǎn)、頁面切換等，開發(fā)人員可以使用live()或bind()進(jìn)行綁定。頁面事件1．頁面顯示或隱藏在jQueryMobile中，當(dāng)不同頁面間或同一個頁面不同容器間相互切換時，將觸發(fā)頁面中的顯示或隱藏事件。2．加載外部頁面外部頁面加載時會觸發(fā)兩個事件，一個是pagebeforeload，另一個是當(dāng)頁面載入成功時會觸發(fā)pageload事件，載入失敗時會觸發(fā)pageloadfailed事件。

3．頁面切換事件在jQueryMobile頁面中，各頁面之間相互切換會顯示相應(yīng)的動畫過渡效果，這樣的頁面切換效果使得jQueryMobile頁面的切換更加自然。實(shí)戰(zhàn)練習(xí)——設(shè)置頁面切換過渡動畫效果觸摸事件在jQueryMobile中，觸摸事件包括5種類型。tap（輕擊）事件taphold（輕擊不放）事件swipe（滑動）事件swipeleft（向左滑動）事件swiperight（向右劃動）事件實(shí)戰(zhàn)練習(xí)——通過滑動屏幕瀏覽圖片

最終文件：光盤\最終文件\第18章\18-2-1.html視頻：光盤\視頻\第18章\18-2-1.swf最終文件：光盤\最終文件\第18章\18-2-2.html視頻：光盤\視頻\第18章\18-2-2.swf屏幕滾動事件在jQueryMobile中，屏幕滾動事件包含兩個類型，一種為開始滾動事件scrollstart，另一種為結(jié)束滾動事件scrollstop。這兩種類型的事件主要區(qū)別在于觸發(fā)時間不同，前者是用戶開始滾動屏幕中頁面時觸發(fā)，而后者是用戶停止?jié)L動屏幕中頁面時觸發(fā)。實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)滾動改變元素背景樣式翻轉(zhuǎn)事件在jQueryMobile事件中，當(dāng)用戶使用移動終端設(shè)備瀏覽頁面時，如果手持設(shè)備的方向發(fā)生變化，即橫向或縱向手持時，將觸發(fā)orientationchange事件。在該事件中，通過獲取回調(diào)函數(shù)中返回對象的orientation屬性，可以判斷用戶手持設(shè)備的當(dāng)前方向。該屬性有兩個值，分別為portrait和landscape，前者表示縱向垂直，后者表示橫向水平。實(shí)戰(zhàn)練習(xí)——檢測移動設(shè)備手持方向

最終文件：光盤\最終文件\第18章\18-2-3.html視頻：光盤\視頻\第18章\18-2-3.swf最終文件：光盤\最終文件\第18章\18-2-4.html視頻：光盤\視頻\第18章\18-2-4.swf

18.3

jQueryMobile常用技巧jQueryMobile作為jQuery插件庫的附屬成員，其輕量級的UI框架、相對其他語言的低學(xué)習(xí)成本，都是受到青睞的原因。但是作為一個新型的移動框架，在使用它開發(fā)項(xiàng)目的過程中，還有許多需要注意的地方。本節(jié)將向讀者介紹一些jQueryMobile的常用技巧。開啟或禁用列表項(xiàng)中的圖標(biāo)在jQueryMobile中，<ul>列表的使用十分頻繁，幾乎所有需要加載大量格式化數(shù)據(jù)的時候都會考慮使用該元素。為了單擊列表選項(xiàng)時鏈接某個頁面，在列表的<li>選項(xiàng)元素中，常常會增加一個<a>元素，用于實(shí)現(xiàn)單擊列表項(xiàng)進(jìn)行鏈接的功能。一旦添加<a>標(biāo)簽后，jQueryMobile默認(rèn)會在列表項(xiàng)的最右側(cè)自動增加一個圓形背景的小箭頭圖標(biāo)，用來表示列表中的項(xiàng)項(xiàng)是一個超鏈接。實(shí)戰(zhàn)練習(xí)——開啟或禁用列表項(xiàng)中的圖標(biāo)

最終文件：光盤\最終文件\第18章\18-3-1.html視頻：光盤\視頻\第18章\18-3-1.swf固定頁面頭部欄與尾部欄在頭部欄或尾部欄的容器元素中增加data-position屬性，設(shè)置該屬性的屬性值為fixed，可以將滾動屏幕時隱藏的頭部欄或尾部欄在停止?jié)L動或單擊時重新出現(xiàn)；再次滾動屏幕時，又自動隱藏，由此實(shí)現(xiàn)將頭部欄或尾部欄以懸浮的形式固定在原有位置上。實(shí)戰(zhàn)練習(xí)——固定頁面頭部欄與尾部欄隨機(jī)顯示頁面背景圖片在jQueryMobile中，頁面的加載過程與在jQuery中并不一樣，它可以很容易地捕捉到一些非常有用的事件，例如pagecreate事件，該事件是頁面初始化事件，該事件中所有請求的DOM元素已經(jīng)完成了創(chuàng)建，正在開始加載，此時，用戶可以自定義部件元素，實(shí)現(xiàn)一些自定義樣式效果，如顯示加載進(jìn)度條或隨機(jī)顯示頁面背景圖片等。實(shí)戰(zhàn)練習(xí)——隨機(jī)顯示頁面背景圖片

最終文件：光盤\最終文件\第18章\18-3-2.html視頻：光盤\視頻\第18章\18-3-2.swf最終文件：光盤\最終文件\第18章\18-3-3.html視頻：光盤\視頻\第18章\18-3-3.swf

18.4本章小結(jié)本章向讀者介紹了jQueryMobile的基本配置項(xiàng)，