隨著移動終端的普及,越來越多的人選擇開發移動應用,而jQuery Mobile 是建立移動 web 應用程式的框架,適用於所有流行的智慧手機和平板電腦。選擇jQuery Mobile省事省力,有利於高效便捷的開發web程式,下面就正對如何下載安裝jQuery Mobile進行詳細說明。
方法/步驟
一、下載jQuery庫
在瀏覽器搜尋框中,輸入jQuery關鍵字,在搜尋結果中,點選進入官方網站。
進入官方網站,點選“Download jQuery”按鈕,進入下載頁面。
進入下載頁面,我們可以看到許多版本的jQuery,這裡我們下載jQuery1.11.3
二、下載jQuery Mobile庫
進入到jQuery Moblie下載介面,下載最新的jQuery Mobile庫,此時最新的庫為1.4.5,所以在這裡我下載jquery.mobile-1.4.5.min.js庫以及樣式庫jquery.mobile-1.4.5.min.css。
將網頁向下拉,可以看到這裡提示了有jQuery CDN hosted files
檔案,在下面測試的第二種方式中,可以直接應用網路上的這個資源。
三、編寫jQuery Mobile程式測試
3.1 使用本地jQuery Mobile庫測試
首先,將剛才下載的jquery-1.11.3.min.js、jquery.mobile-1.4.5.min.js庫以及樣式庫jquery.mobile-1.4.5.min.css放到一個新建的名為jquery的檔案中。
在jquery相同目錄下,新建一個test.html檔案,裡面輸入以下內容,如圖所示注意:紅線中的內容,一定要引用正確的路徑
jquery的js檔案一定要放在jquery mobile的js檔案前面,因為jquery mobile需要jquery庫的支援。
然後,使用瀏覽器開啟test.html檔案,便可以看到網頁中正確顯示資訊,且樣式如圖所示,,這樣jQuery Mobile就安裝好了。其實安裝也就是將庫檔案正確引入到html檔案中。
注意:有些瀏覽器會因為跨域問題不顯示,建議使用火狐瀏覽器或著將瀏覽器的跨域設定去除,亦或是將test.html放到一個伺服器中在訪問。
3.2 使用CDN引用的jQuery Mobile 庫測試
在任意目錄下新建一個test2.html檔案,寫上測試程式碼,然後再標籤對中引用第5步上的jQuery CDN hosted files,如圖所示:
使用瀏覽器開啟test2.html檔案,便可以看到網頁中正確顯示資訊,且樣式如圖所示,這樣jQuery Mobile就設定好了。