jQueryMobile 下載安裝，工做原理，處理移動設備

下載安裝，工做原理，自動加強，視口，事件，響應手持方向，移動瀏覽仿真器

jQueryMobile

1. 下載安裝

　　http://jquerymobile.com

　　<header>

　　　　<title>導入</title>

　　　　<meta name="viewport" content="width=device-width,initial-scale=1">

　　　　<script type="text/javascript" src="jquery-1.10.1.js"></script>

　　　　<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>

　　　　<link type="text/css" rel="stylesheett" href="jquery.mobile-1.3.1.css">

　　</header>

2. 工做原理

　　jquerymobile提供三種瀏覽器級別支持

　　A　　級別最高　　可提供最佳體驗

　　B　　次之　　　　除了不支持Ajax導航，其餘都支持，頁面切換不如A平滑

　　C　　基礎　　　　　　　支持較老的設備

2.1 自動加強

　　jQueryMobile 組件沒必要明確建立。

　　當使用script導入jQueryMobile庫後，它會自動加強這個頁面。

　　首先會尋找帶有data-role屬性的元素，而後根據屬性值決定對元素作什麼處理。

　　data-role　　page　　　　該元素內容視爲一個頁，一個HTML文件可包含多個「頁」

　　　　　　　　  header　　　當前頁標題

　　　　　　　　  content　　  當前頁內容

2.2 視口

　　<meta name="viewport" content="width=device-width,initial-scale=1">

　　或使用CSS媒體查詢識別屏幕大小，各寫一套樣式

2.3 事件

　　1.頁事件　　　

　　<header>

　　　　<title>導入</title>

　　　　<meta name="viewport" content="width=device-width,initial-scale=1">

　　　　<script type="text/javascript" src="jquery-1.10.1.js"></script>

　　　　<script type="text/javascript">　　　　　　　　　　　//自定義腳本放於庫導入以前

　　　　　　$(document).bind("pageinit",function(){　　　　//將名爲pageinit的事件綁定在document上 

　　　　　　　　$("button").click(function(){

　　　　　　　　　　console.log("button press")

　　　　　　　　});

　　　　　　});

　　　　</script>

　　　　<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>

　　　　<link type="text/css" rel="stylesheett" href="jquery.mobile-1.3.1.css">

　　</header>

　　2.觸摸事件

　　　　爲了支持各類用戶腳本，移動瀏覽器會自動一些觸摸事件額外生成相應的鼠標事件。

　　　　瀏覽器先觸發觸摸事件，再僞造一個表示一樣行爲的鼠標事件。

　　　　touchstart　　 每一個手指觸摸屏幕都會觸發

　　　　touchend　　  手指離開屏幕時觸發

　　　　touchmove　   手指不離開屏幕移動時觸發

　　　　touchcancel　　-----手指移動到屏幕邊緣時觸發

　　　　（www.w3.org/TR/touch-events）

　　3.手勢方法

　　　　tap　　　　　　 短期內單擊屏幕並迅速離開時觸發

　　　　taphold　　　　壓住屏幕保持約1s後離開屏幕時觸發

　　　　swipe　　　　　1s內水平拖拽至少30px,垂直方向變更不超過20px時觸發

　　　　swipeleft　　　向左

　　　　swiperight　　向右

　　4.虛擬鼠標事件

　　　　因爲瀏覽器沒有義務僞造鼠標事件，Web應用想要同時支持觸摸設備和非觸摸設備，

　　就必須同時監聽鼠標事件和觸摸事件。移動瀏覽器確實會僞造事件，這樣每一個交互都能

　　捕獲到觸摸事件和鼠標事件。爲了簡化這一處理，jQueryMobile定義了虛擬鼠標事件，

　　當綁定這些事件時，jQueryMobile會當心地刪除那些重複發生的事件，並保證那些須要

　　觸發的事件必定會發生，無論該設備是否支持觸摸。

　　　　vmouseover

　　　　vmousedown

　　　　vmousemove

　　　　vmouseup

　　　　vmousecancek

　　　　vclick　　

2.4 響應手持方向

　　　　絕大多數瀏覽器支持 orientationchange 事件，這個事件在設備手持方向旋轉90度

　　時發生，jQueryMobile會在不支持此事件的瀏覽器上僞造這一事件。這是經過監視窗口的

　　大小變化及新高度的比例來實現的。　　

　　<header>

　　　　<title>導入</title>

　　　　<meta name="viewport" content="width=device-width,initial-scale=1">

　　　　<script type="text/javascript" src="jquery-1.10.1.js"></script>

　　　　<script type="text/javascript">　　　　　　　　　　　//自定義腳本放於庫導入以前

　　　　　　$(document).bind("pageinit",function(){　　　　//將名爲pageinit的事件綁定在document上 

　　　　　　　　$(window).bind("orientationchange",function(e){　　//爲了綁定orientationchange事件選擇window對象

　　　　　　　　　　$("#spanA").text(e.orientation)　　　　//改變span元素文本的方式指示新的方向，利用傳遞給事件處理函數Event對象的

　　　　　　　　});　　　　　　　　　　　　　　　　　　　　　//orientation屬性，咱們可以獲知設備如今是橫屏仍是 豎屏

　　　　　　　　$("#spanA").text(jQuery.event.special.orientationchange.orientation()) //該方法判斷當前屏幕方向

　　　　　　});

　　　　</script>

　　　　<script type="text/javascript" src="jquery.mobile-1.3.1.js"></script>

　　　　<link type="text/css" rel="stylesheett" href="jquery.mobile-1.3.1.css">

　　</header>

　　若瀏覽器不支持方向變化，則經過窗口的高寬比來判斷設備方向。

　　利用媒體查詢管理設備朝向，利用display 屬性控制元素顯示或隱藏

　　@media screen and (orientation:portrait){　　豎

　　}　

　　@media screen and (orientation:landscape){　　橫

　　}

3. 處理移動設備

　　若是打算讓應用同時支持桌面用戶和移動用戶，則：

　　爲桌面瀏覽器提供 jQuery UI，

　　爲移動設備提供jQuery Mobile。

3.1 避免兩大陷阱　

　　1 避免錯誤假設

　　  移動設備  不等於iPhone

　　　移動設備  不等於手機

　　　移動設備  不等於觸摸設備

　　　移動設備  的流量不只有限並且收費

　　2 避免不切實際的仿真和測試

3.4 移動瀏覽器仿真器

　　沒有觸感

　　不會遮擋

　　過於精準

3.5 移動瀏覽器仿真器

　　A　　Opera Mobile 模擬器　　　　www.opera.com/developer/mobile-emulator

　　B　　BrowserStack商業服務　　　http://browserstack.com得到試用賬號