移動Web開發(fā)之jQuery Mobile

1、.jQuery Mobile實例10-1：搭建jQuery Mobile開發(fā)環(huán)境綜合實例：網(wǎng)上訂餐系統(tǒng)實例10-2：搭建測試環(huán)境實例10-3：動態(tài)滑動條實例10-4：使用選擇菜單.10.1.1 什么是什么是jQueryjQuery不但兼容CSS 3，而且還兼容各種瀏覽器（IE 6.0，F(xiàn)F 1.5，Safari 2.0，Opera 9.0），jQuery 2.0及后續(xù)版本將不再支持IE 6/7/8瀏覽器。jQuery使用戶能夠更加方便地處理HTMLdocuments、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供Ajax交互。.jQuery為使用者提供了健全的文檔說明，各種應(yīng)用也講解得十分詳

2、細。jQuery為開發(fā)人員提供了許多成熟的插件，通過這些插件可以設(shè)計出動感的頁面。jQuery能夠使用戶的HTML頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。.10.1.2 jQuery Mobile基礎(chǔ)基礎(chǔ)jQuery Mobile是一個為觸控優(yōu)化的框架，用于創(chuàng)建移動Web應(yīng)用程序；jQuery適用于所有流行的智能手機和平板電腦；jQuery Mobile構(gòu)建于jQuery庫之上，如果通曉jQuery會更易學(xué)習(xí)；它使用HTML5、CSS3、JavaScript和AJAX通過盡可能少的代碼來完成對頁面的布局。.從CDN引用jQuer

3、y Mobile（推薦）；從jQ下載jQuery Mobile庫。.（1）簡明）簡明（2）持續(xù)增強和優(yōu)雅降級）持續(xù)增強和優(yōu)雅降級（3）Accessibility.（4）小規(guī)模）小規(guī)模（5）主題設(shè)置）主題設(shè)置.jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本號。jQuery.Mobile-x.x.x.min.css：與jQuery Mobile框架相配套的CSS樣式文件。.（1）登錄jQuery Mobile官方網(wǎng)站（），如下圖所示。 jQuery Mobile的官方網(wǎng)站界面.（2）單擊導(dǎo)航條中的“download”按鈕進入文件下載頁面

4、，如下圖所示。文件下載頁面.（3）單擊文件鏈接即可下載，下載后成功后會獲得一個名為“jquery.mobile-x.x.x.zip”的壓縮包，解壓后會獲得css、js和圖片格式的文件，如下圖所示。解壓后的效果.（1）登錄Opera官方網(wǎng)站，如右圖所示。Opera官方網(wǎng)站.（2）下載Opera Mobile Emulator，下載完成后會獲得一個可運行文件，筆者獲得的是：Opera_Mobile_Emulator_12.1_Windows.exe。如下圖所示。獲得的可運行文件（3）雙擊上述可運行文件進行安裝，安裝成功后雙擊“Opera Mobile Emulator”圖標(biāo)運行，初始運行界面如下圖所示，此處選擇語言“簡體中文”。選擇語言.（4）單擊“確定”按鈕，在新界面中可以進行相關(guān)設(shè)置，在此我們只需使用默認設(shè)置即可，如下圖所示。設(shè)置界面.（5）單擊“啟動”按鈕后，成功運行測試工具Opera Mobile Emulator，如右圖所示。Opera Mobile Emulator運行效果.（1）create：當(dāng)slider被創(chuàng)建時觸發(fā)，例如：（2）slidestart：當(dāng)slider的交互開始時觸發(fā)，包括點擊和拖動。例如：（3）slidestop：當(dāng)slider的交互結(jié)束時觸發(fā)，包括點擊和拖動。例如：. 初始效果 創(chuàng)建了一個滑動條