jQuery Mobile環境設定

jQuery Mobile應用程式與一般的HTML網頁程式不同，HTML網頁不需Web Server則可直接在本機電腦以瀏覽器執行，但jQuery Mobile應用程式必須在Web Server環境才能正常執行。模擬用的Web Server有很多免費的軟體，其中XAMPP可以說是其中的佼佼者，XAMPP為Apache+MySQL+PHP +Perl之縮寫，因此其中XAMPP亦支援MySQL, PHP, Perl之執行。

XAMPP安裝程式可至 https://www.apachefriends.org 下載，目前版本為5.6.3，支援Microsoft Windows, Mac OS X, Linux等作業系統，以Microsoft Windows作業系統為例，自XAMPP網站下載XAMPP安裝程式 (xampp-win32-5.6.3-0-VC11-installer.exe) 之後，直接執行安裝程式，其中安裝目錄選擇預設目錄C:\xampp，待安裝完成之後，安裝程式將詢問是否啟動XAMPP Control Panel，如下圖所示，勾選選項並按「Finish」按鈕，則完成安裝並啟動XAMPP Control Panel。

XAMPP Control Panel如下圖所示，預設支援Apache, MySQL, FileZilla, Mercury與Tomcat服務，jQuery Mobile應用程式需以Apache執行，因此點選Apache服務右側的「Start」按鈕則可啟動Apache服務。

啟動Apache服務時，將出現以下之防火牆警告訊息，分別依需求，勾選「私人網路」或「公用網路」選項，並點選「允許存取」按鈕則完成XAMPP之設定。

為執行jQuery Mobile，需自 http://jquerymobile.com 網站下載jQuery Mobile套件，目前版本為1.4.5，檔案包括：

• jquery.mobile-1.4.5.min.css
• jquery.mobile-1.4.5.min.js

此外，並需要jQuery電腦版之JS檔案，可自 http://jquery.com 網站下載，例如jquery-2.1.0.min.js。其中檔案名稱含有「min」，代表此檔案經過壓縮處理，較沒有「min」字樣的檔案為小，因此下載與匯入時間較短。

接著在XAMPP的安裝目錄C:\xampp\htdocs下建立一目錄如mobile，並在mobile目錄下分別建立css與js目錄，將上述之jquery.mobile-1.4.5.min.css複製至css目錄下、jquery-2.1.0.min.js與jquery.mobile-1.4.5.min.js複製至js目錄下，如此則完成jQuery Mobile的環境設定。

為測試是否安裝正確，接著在C:\xampp\htdocs\mobile目錄下建立一index.html網頁，其內容如下：

...
 






...
  

    

      
黃嘉輝教學網站
      電腦版
    
    

      

        
 
        
教師資訊
        
課程資訊
        
研究著作
        
專書著作
        
研究計畫
        
榮譽獎項
        
聯絡資訊
        
English Edition
        
 
      
    
    
...
  
...

內容基本上類似於一般的HTML網頁，但為能執行jQuery Mobile，因此在網頁標題 (Head) 部份加入上述之css與js檔案設定：

 






...

【執行結果】

欲執行上述程式，可使用平版電腦或智慧型手機的瀏覽器執行http://<主機IP Address>/mobile/index.html，以下為以Apple iPad平版電腦執行的結果：

以下為以Android智慧型手機執行的結果：

【參考資料】

[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com

© Chia-Hui Huang