jquery mobile

簡介：jQuery Mobile框架可以輕松的幫助我們實現非常好看的、可跨設備的Web應用程序。我們將后續的介紹中向大家介紹大量的代碼及實例。

jQuery一直以來都是非常流行的富客戶端及Web應用程序開發中使用的JavaScript類庫,然而一直以來它都是為桌面瀏覽器設計的，沒有特別為移動應用程序設計。

jQuery Mobile是一個新的項目用來添補在移動設備應用上的缺憾。它是基本jQuery框架并提供了一定范圍的用戶接口和特性，以便于開發人員在移動應用上使用。使用該框架可以節省大量的js代碼開發時間，盡管目前的版本還是不是一個穩定的版本。但它的應用效果已經備受矚目。

接下來我們將通過實例向大家展示jQuery Mobile的特性及好處，讓我們看一下這個新框架是怎么幫助你在短時間內建立起一個高質量的移動應用程序,接下來的代碼講解中的代碼最好使用的移動設備平臺是IPhone或Android?；蛘呤荘C電腦上使用 Safari瀏覽器調試。

jQuery Msobile 都能做什么?

1、jQuery Mobile為開發移動應用程序提供了非常簡單的用戶接口

2、這種接口的配置是標簽驅動的，這意味著我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼

3、提供了一些自定義的事件用來探測移動和觸摸動作。例如tap(敲擊)、tap-and-hold（點擊并按住）、swipe、orientation change

4、使用一些加強的功能時需要參照一下設備瀏覽器支持列表

5、使用預設主題可以輕松定制應用程序外觀

AJAX 導航

為了實現在移動設備上的無縫客戶體驗，jQuery Mobile默認采用AJAX的方式載入一個目的鏈接頁面。因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，并把請求得到的內容注入到當前頁面的DOM里。另外還需要確保請求的頁面url唯一標識的。

這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕松的顯示到這個頁面里。這種平滑的客戶體驗相比于傳統打開一個新的頁面并等待數秒的方式要好很多。當一個新的頁面做為新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時能夠盡快的顯示出來。這個工作過程聽起來難以置信的復雜，但是做為開發人員的我們大部份不需要了解其中工作的具體細節。只要能看到效果就OK。

注意:如果你不想采用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性AJAX 導航

為了實現在移動設備上的無縫客戶體驗，jQuery Mobile默認采用AJAX的方式載入一個目的鏈接頁面。因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，并把請求得到的內容注入到當前頁面的DOM里。另外還需要確保請求的頁面url唯一標識的。

這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕松的顯示到這個頁面里。這種平滑的客戶體驗相比于傳統打開一個新的頁面并等待數秒的方式要好很多。當一個新的頁面做為新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時能夠盡快的顯示出來。這個工作過程聽起來難以置信的復雜，但是做為開發人員的我們大部份不需要了解其中工作的具體細節。只要能看到效果就OK。

注意:如果你不想采用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性

格式化文本

為了使其盡可能的靈活，jQuery Mobile使更多的普通HTML內容更加獨立。加入適當的縮進使內容的可讀性更強。

有兩種布局方法使其格式化變得更簡單：布局表格和可折疊的內容塊

布局表格：組織內容以列的形式顯示，有兩列表格，和三列表格

可折疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展現出來