jQuery Mobile簡介:統一接口工具
很多開發者都積極尋找高效的方法，使得構建的基于移動的應用程序能在多種設備上運行。在本文中，將率先向大家介紹jQuery中的一個新的項目：jQuery Mobile。雖然它現在還在Alpha版本，但其強大的功能還是值得我們先睹為快。
jQuery Mobile旨在為開發者提供一系列統一的接口工具,這些工具可以確保能在不同的移動設備的瀏覽器中得到充分的兼容。jQuery Mobile基于HTML 5,jQuery和CSS，目的為了提供一個豐富交互性強的接口去兼容各種設備，同時允許經過少量的修改就能運行在一些兼容性方面有沖突的設備中。這一特性使得開發者可以在標準的桌面瀏覽器中就能進行各類型的測試，當然，在投入到真實生產環境前，應該是在不同的移動設備上進行測試的。
jQuery 的移動策略可以簡單的總結為：創建一個在常見智能手機/平板電腦瀏覽器領域內能統一用戶界面的頂級JavaScript庫。本文是介紹jQuery Mobile項目的文章，但讀者要注意的是，在本文完成之際，jQuery Mobile項目還是處在Alpha 2階段，在未來的一段日子可能項目本身還會發生些改變。所以在本文中學到的一些語法和API，在將來的正式版本中有可能會發生變化。
我們的最關鍵的麻煩在于我們所關注的種類繁多的移動平臺。我們已經在引入jQuery支持到所有的(手機/桌面)瀏覽器的工作中付出了很多努力，這證明了我們完全有能力做好，并且現在jQuery也已經占有了一定的市場份額。在這種情況下，我們將手機網頁瀏覽器和桌面瀏覽器的jQuery開發做同等重要的對待。
為了使這種廣泛的手機支持成為可能，所有在jQuery Mobile中的頁面都是基于簡潔，語義化的HTML來構建，這樣可以確保能兼容于大部分支持web瀏覽的設備。在這些設備中 解析css和javascript的過程中 ，jQuery Mobile使用了先進的技術并借助jQuery和CSS本身的能力，以一種不明顯的方式將語義化的頁面轉化成富客戶端頁面。一些簡單易操作的特性比如WAI-ARIA通過框架已經緊密集成進來，以給屏幕閱讀器或者其他輔助設備(主要指手持設備)提供支持。
#p#
jQuery Mobile的頁面結構
jQuery Mobile的頁面結構看起來跟典型的HTML文檔是一樣的，包括了頁面頭部，主體部分和footer。在HTML中的標簽中，你會看到引用的jQuery庫和jQuery Mobile庫和jQuery Mobile的CSS文件，這些都可以在jQuery Mobile的網站下載，下面是一個簡單的例子：
在桌面瀏覽器或者手機瀏覽器上運行，會發現是如下圖所示的效果：
- <html>
- <head>
- <meta charset="utf-8">
- <title>W.J. Gilmore, LLC</title>
- <link rel="stylesheet"
- href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
- <link rel="apple-touch-icon" href="img/tutsTouchIcon.png" />
- <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
- <script type="text/javascript"
- src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header" id="home">
- <h1>WJGilmore, LLC</h1>
- </div>
- <div data-role="content">
- <p>Check back regularly for the latest information about Jason's books!</p>
- </div>
- <div data-role="footer">
- <h1>Copyright © 2010 W.J. Gilmore, LLC</h1>
- </div>
- </div>
- </body>
- </html>
正如你所看到的，jQuery Mobile自動使用CSS樣式化了頭部和尾部，是通過data-role屬性去實現的。#p#
鏈接到內部頁面
一般，頁面是由許多不同的頁面所組成的。由于移動應用的頁面一般都是比較簡單的，所以可以很容易在一個單獨的頁面中進行管理，在這個頁面中，可以設置多個DIV層，一個緊跟著另外一個，為了在不同的內部頁面之間實現導航，可以使用象HTML中的錨點的語法，下面是一個例子:
- <div data-role="page" id="home">
- ...
- <div data-role="content">
- <p><a href="#epwzf">Easy PHP Websites with the Zend Framework</a></p>
- </div>
- ...
- </div>
- <div data-role="page" id="epwzf">
- <div data-role="header">
- <h1>WJGilmore, LLC</h1>
- </div>
- <div data-role="content">
- <strong>Easy PHP Websites with the Zend Framework</strong><br />
- <p>
- <em>Easy PHP Websites with the Zend Framework</em> is the ultimate
- introduction to the popular Zend Framework, covering practical topics
- including Doctrine, Zend_Db, Zend_Test, automated deployment, and much
- more!
- </p>
- </div>
- <div data-role="footer">
- <h1>Copyright © 2010 W.J. Gilmore, LLC</h1>
- </div>
你會發現，在鏈接中，通過使用錨點的方法，可以跳轉到ID為epwzf的DIV層。下圖是實際的效果，注意的是,jQuery Mobile為其生成了自動的返回的按鈕。
#p#
使用主題
在使用HTML的標準語法元素去構建移動應用時，jQuery Mobile最有趣的特征是它可以增強和美化HTML頁面的效果，使到它能適合移動應用的樣式。比如象下面的一段普通的HTML：
在普通的瀏覽器中，可以看到的效果如下圖：
如果你要需要在移動設備中，看到很好的效果的話，只需要在
中增加data-role="listview"即可,效果如下圖:
當然,還有能做到更好的辦法,你可以使用jQuery Mobile主題包中的任意一個樣式主題,只需要在元素中加入屬性data-theme="X"即可(其中X指的是主題的包名),比如設置為data-theme="a"即可看到如下圖的效果:
目前,很奇怪的是對主題樣式以字母這樣的形式命名,估計是目前項目團隊的權宜之計吧,相信在不久的將來會有所改進的。
總結：
目前jQuery Mobile項目還處在alpha 2版本階段，還有一些不足和存在的問題。但由于開發者對jQuery是十分熟悉的，因此在開發時成本不高，易于上手，而且很容易將原來基于WEB的應用通過jQuery Mobile項目進行改造過來。
