品嘗Android jQuery Mobile初探
一、下載jQuery Mobile組件
官方下載地址：http://jquerymobile.com/download/
二、創(chuàng)建網(wǎng)站項(xiàng)目
2.1、使用VS2010創(chuàng)建一個(gè)ASP.NET項(xiàng)目，將所需的js、css添加進(jìn)來：
2.2、VS2010可以直接拖拽js、css生成相應(yīng)的標(biāo)簽，非常方便：
2.3、搭建一個(gè)基本的頁面框架，包含標(biāo)題、內(nèi)容、頁腳：
- <div data-role="page">
- <div data-role="header">
- <h1>
- Page Title</h1>
- </div>
- <!-- /header -->
- <div data-role="content">
- Page content goes here.</p>
- </div>
- <!-- /content -->
- <div data-role="footer">
- <h4>
- Page Footer</h4>
- </div>
- <!-- /footer -->
- </div>
data-role即HTML5的自定義屬性。
2.4、F5運(yùn)行，我使用的Chrome 11。效果如下：
三、搭建服務(wù)器
為了在手機(jī)上訪問，需要搭建一個(gè)Web服務(wù)器，先在PC上用IIS，然后在手機(jī)上搭建。
3.1、在IIS 中創(chuàng)建一個(gè)網(wǎng)站：
注意應(yīng)用程序池的配置，我用的.NET 4.0：
#p#
3.2、PC上瀏覽正常：
3.3、下面在手機(jī)上訪問，首先啟用Wifi，家里有無線路由，故和PC組成局域網(wǎng)，PC IP：192.168.0.100，手機(jī) IP：192.168.0.101，手機(jī)中安裝了VNCServer，在PC 上通過RealVNC 的客戶端測(cè)試效果：
原生瀏覽器:
Firefox Mobile 4：
Opera Mobile 11：
#p#
3.4、為了開發(fā)測(cè)試方便，在手機(jī)上搭建一個(gè)Web 服務(wù)器.我使用的kws，一個(gè)小型的Web服務(wù)器，性能還不錯(cuò)。
首先需要將網(wǎng)頁和js、css等部署到手機(jī)上，kws只是個(gè)靜態(tài)頁面服務(wù)器，不支持ASP.NET。
為了方便部署，在手機(jī)上啟用FTP服務(wù)器，我使用的SwiFTP，在PC上用FileZilla連接:
我刷的i9000的2.3.3 ROM，系統(tǒng)分區(qū)已經(jīng)是Ext4，部分目錄在Windows 上無法讀取。下面將HTML頁面部署到SD卡中：
Scripts目錄中存放的是js、css等。
配置一下kws的主目錄，別忘了重啟kws使配置生效：
PC上訪問正常：
手機(jī)上運(yùn)行也正常：
小結(jié)：
移動(dòng)終端的浪潮已經(jīng)來臨，各種針對(duì)移動(dòng)終端的移植、優(yōu)化、測(cè)試、系統(tǒng)將會(huì)越來越多。jQuery Mobile作為一個(gè)優(yōu)秀的跨平臺(tái)B/S解決方案，值得關(guān)注。后續(xù)篇章會(huì)繼續(xù)測(cè)試官方示例，深入窺探一下這個(gè)"微觀世界"
注：為了便于測(cè)試、部署程序，高配的手機(jī)可以適當(dāng)安裝些服務(wù)器，如FTP、Web、DNS、VNC服務(wù)器等。
【編輯推薦】
詳解jQuery構(gòu)造器的實(shí)現(xiàn)
