品嘗Android jQuery Mobile初探
一、下載jQuery Mobile組件
官方下載地址：http://jquerymobile.com/download/
二、創建網站項目
2.1、使用VS2010創建一個ASP.NET項目，將所需的js、css添加進來：
2.2、VS2010可以直接拖拽js、css生成相應的標簽，非常方便：
2.3、搭建一個基本的頁面框架，包含標題、內容、頁腳：
- <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運行，我使用的Chrome 11。效果如下：
三、搭建服務器
為了在手機上訪問，需要搭建一個Web服務器，先在PC上用IIS，然后在手機上搭建。
3.1、在IIS 中創建一個網站：
注意應用程序池的配置，我用的.NET 4.0：
#p#
3.2、PC上瀏覽正常：
3.3、下面在手機上訪問，首先啟用Wifi，家里有無線路由，故和PC組成局域網，PC IP：192.168.0.100，手機 IP：192.168.0.101，手機中安裝了VNCServer，在PC 上通過RealVNC 的客戶端測試效果：
原生瀏覽器:
Firefox Mobile 4：
Opera Mobile 11：
#p#
3.4、為了開發測試方便，在手機上搭建一個Web 服務器.我使用的kws，一個小型的Web服務器，性能還不錯。
首先需要將網頁和js、css等部署到手機上，kws只是個靜態頁面服務器，不支持ASP.NET。
為了方便部署，在手機上啟用FTP服務器，我使用的SwiFTP，在PC上用FileZilla連接:
我刷的i9000的2.3.3 ROM，系統分區已經是Ext4，部分目錄在Windows 上無法讀取。下面將HTML頁面部署到SD卡中：
Scripts目錄中存放的是js、css等。
配置一下kws的主目錄，別忘了重啟kws使配置生效：
PC上訪問正常：
手機上運行也正常：
小結：
移動終端的浪潮已經來臨，各種針對移動終端的移植、優化、測試、系統將會越來越多。jQuery Mobile作為一個優秀的跨平臺B/S解決方案，值得關注。后續篇章會繼續測試官方示例，深入窺探一下這個"微觀世界"
注：為了便于測試、部署程序，高配的手機可以適當安裝些服務器，如FTP、Web、DNS、VNC服務器等。
【編輯推薦】
