jQuery Mobile簡介:統(tǒng)一接口工具
很多開發(fā)者都積極尋找高效的方法，使得構(gòu)建的基于移動的應(yīng)用程序能在多種設(shè)備上運(yùn)行。在本文中，將率先向大家介紹jQuery中的一個新的項(xiàng)目：jQuery Mobile。雖然它現(xiàn)在還在Alpha版本，但其強(qiáng)大的功能還是值得我們先睹為快。
jQuery Mobile旨在為開發(fā)者提供一系列統(tǒng)一的接口工具,這些工具可以確保能在不同的移動設(shè)備的瀏覽器中得到充分的兼容。jQuery Mobile基于HTML 5,jQuery和CSS，目的為了提供一個豐富交互性強(qiáng)的接口去兼容各種設(shè)備，同時允許經(jīng)過少量的修改就能運(yùn)行在一些兼容性方面有沖突的設(shè)備中。這一特性使得開發(fā)者可以在標(biāo)準(zhǔn)的桌面瀏覽器中就能進(jìn)行各類型的測試，當(dāng)然，在投入到真實(shí)生產(chǎn)環(huán)境前，應(yīng)該是在不同的移動設(shè)備上進(jìn)行測試的。
jQuery 的移動策略可以簡單的總結(jié)為：創(chuàng)建一個在常見智能手機(jī)/平板電腦瀏覽器領(lǐng)域內(nèi)能統(tǒng)一用戶界面的頂級JavaScript庫。本文是介紹jQuery Mobile項(xiàng)目的文章，但讀者要注意的是，在本文完成之際，jQuery Mobile項(xiàng)目還是處在Alpha 2階段，在未來的一段日子可能項(xiàng)目本身還會發(fā)生些改變。所以在本文中學(xué)到的一些語法和API，在將來的正式版本中有可能會發(fā)生變化。
我們的最關(guān)鍵的麻煩在于我們所關(guān)注的種類繁多的移動平臺。我們已經(jīng)在引入jQuery支持到所有的(手機(jī)/桌面)瀏覽器的工作中付出了很多努力，這證明了我們完全有能力做好，并且現(xiàn)在jQuery也已經(jīng)占有了一定的市場份額。在這種情況下，我們將手機(jī)網(wǎng)頁瀏覽器和桌面瀏覽器的jQuery開發(fā)做同等重要的對待。
為了使這種廣泛的手機(jī)支持成為可能，所有在jQuery Mobile中的頁面都是基于簡潔，語義化的HTML來構(gòu)建，這樣可以確保能兼容于大部分支持web瀏覽的設(shè)備。在這些設(shè)備中 解析css和javascript的過程中 ，jQuery Mobile使用了先進(jìn)的技術(shù)并借助jQuery和CSS本身的能力，以一種不明顯的方式將語義化的頁面轉(zhuǎn)化成富客戶端頁面。一些簡單易操作的特性比如WAI-ARIA通過框架已經(jīng)緊密集成進(jìn)來，以給屏幕閱讀器或者其他輔助設(shè)備(主要指手持設(shè)備)提供支持。
#p#
jQuery Mobile的頁面結(jié)構(gòu)
jQuery Mobile的頁面結(jié)構(gòu)看起來跟典型的HTML文檔是一樣的，包括了頁面頭部，主體部分和footer。在HTML中的標(biāo)簽中，你會看到引用的jQuery庫和jQuery Mobile庫和jQuery Mobile的CSS文件，這些都可以在jQuery Mobile的網(wǎng)站下載，下面是一個簡單的例子：
在桌面瀏覽器或者手機(jī)瀏覽器上運(yùn)行，會發(fā)現(xiàn)是如下圖所示的效果：
- <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屬性去實(shí)現(xiàn)的。#p#
鏈接到內(nèi)部頁面
一般，頁面是由許多不同的頁面所組成的。由于移動應(yīng)用的頁面一般都是比較簡單的，所以可以很容易在一個單獨(dú)的頁面中進(jìn)行管理，在這個頁面中，可以設(shè)置多個DIV層，一個緊跟著另外一個，為了在不同的內(nèi)部頁面之間實(shí)現(xiàn)導(dǎo)航，可以使用象HTML中的錨點(diǎn)的語法，下面是一個例子:
- <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>
你會發(fā)現(xiàn)，在鏈接中，通過使用錨點(diǎn)的方法，可以跳轉(zhuǎn)到ID為epwzf的DIV層。下圖是實(shí)際的效果，注意的是,jQuery Mobile為其生成了自動的返回的按鈕。
#p#
使用主題
在使用HTML的標(biāo)準(zhǔn)語法元素去構(gòu)建移動應(yīng)用時，jQuery Mobile最有趣的特征是它可以增強(qiáng)和美化HTML頁面的效果，使到它能適合移動應(yīng)用的樣式。比如象下面的一段普通的HTML：
在普通的瀏覽器中，可以看到的效果如下圖：
如果你要需要在移動設(shè)備中，看到很好的效果的話，只需要在
中增加data-role="listview"即可,效果如下圖:
當(dāng)然,還有能做到更好的辦法,你可以使用jQuery Mobile主題包中的任意一個樣式主題,只需要在元素中加入屬性data-theme="X"即可(其中X指的是主題的包名),比如設(shè)置為data-theme="a"即可看到如下圖的效果:
目前,很奇怪的是對主題樣式以字母這樣的形式命名,估計(jì)是目前項(xiàng)目團(tuán)隊(duì)的權(quán)宜之計(jì)吧,相信在不久的將來會有所改進(jìn)的。
總結(jié)：
目前jQuery Mobile項(xiàng)目還處在alpha 2版本階段，還有一些不足和存在的問題。但由于開發(fā)者對jQuery是十分熟悉的，因此在開發(fā)時成本不高，易于上手，而且很容易將原來基于WEB的應(yīng)用通過jQuery Mobile項(xiàng)目進(jìn)行改造過來。
