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

1、.jQuery Mobile實(shí)例10-1：搭建jQuery Mobile開發(fā)環(huán)境綜合實(shí)例：網(wǎng)上訂餐系統(tǒng)實(shí)例10-2：搭建測(cè)試環(huán)境實(shí)例10-3：動(dòng)態(tài)滑動(dòng)條實(shí)例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、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供Ajax交互。.jQuery為使用者提供了健全的文檔說明，各種應(yīng)用也講解得十分詳

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

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

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