JqueryMobile和Phonegap交流1

1、112目錄目錄nJqueryMobilen介紹、優(yōu)缺點(diǎn)n事件、常用控件n常見(jiàn)問(wèn)題和注意事項(xiàng)nPhonegapn介紹n常用API列表nPhonegap打包njQuery Mobile 是Jquery在手機(jī)上和平板設(shè)備上的版本，并且有一套完整統(tǒng)一的JQuery移動(dòng)UI框架，支持全球主流的移動(dòng)平臺(tái)。njQuery Mobile 框架構(gòu)建于 jQuery 內(nèi)核之上。nJquery Mobile框架本身是獨(dú)立于 jQuery 內(nèi)核（縮小或壓縮后大約 25KB）的一個(gè)額外下載（縮小或壓縮后大約 12KB）njQuery Mobile 是開(kāi)源免費(fèi)的,目前最新版本1.4nJqueryMobileJqueryM

2、obile介紹介紹n優(yōu)點(diǎn)n上手迅速，與Android和IOS原生系統(tǒng)相比構(gòu)建UI和邏輯會(huì)快的多n避免麻煩的應(yīng)用商店審核過(guò)程以及調(diào)試、構(gòu)建帶來(lái)的痛苦，尤其是蘋果的AppStore審核。避免系統(tǒng)升級(jí)帶來(lái)的麻煩。n支持跨平臺(tái)和跨設(shè)備開(kāi)發(fā)n缺點(diǎn)n慢，比原生程序運(yùn)行慢很多，尤其是Android上。n穩(wěn)定性較差，界面布局較復(fù)雜的頁(yè)面有可能在不同手機(jī)瀏覽器暴露的問(wèn)題不同n和原生程序比，能力有限，運(yùn)行在瀏覽器上的程序不能完全訪問(wèn)設(shè)備的很多特性，必須結(jié)合著Phonegap類似的接口完成n部分控件不太好用nJqueryMobileJqueryMobile優(yōu)缺點(diǎn)優(yōu)缺點(diǎn) n 聲明位于文檔中的最前面的位置，處于 標(biāo)簽之

3、前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范n是html5的頭聲明nviewport的meta標(biāo)簽將屏幕的寬度設(shè)置為了與設(shè)備的寬度相同nHTML 頁(yè)眉部分加載三個(gè)重要的 jQuery Mobile 組件n一個(gè)簡(jiǎn)單的一個(gè)簡(jiǎn)單的JqueryMobileJqueryMobile頁(yè)面頁(yè)面歡迎訪問(wèn)我的主頁(yè) 內(nèi)容頁(yè)腳文本 n一個(gè)簡(jiǎn)單的一個(gè)簡(jiǎn)單的JqueryMobileJqueryMobile頁(yè)面頁(yè)面nJqueryMobileJqueryMobile樣式樣式- -主題構(gòu)建器主題構(gòu)建器nJqueryMobileJqueryMobile樣式樣式- -插件插件nJqueryMobileJqu

4、eryMobile常用控件常用控件 由于常用控件較多，具體使用詳情見(jiàn)官網(wǎng)示例，這里不做詳細(xì)介紹，只大概展示有哪些控件 nJqueryMobileJqueryMobile常用控件分類常用控件分類nJqueryMobileJqueryMobile部分控件效果部分控件效果nJqueryMobileJqueryMobile部分控件代碼部分控件代碼nJqueryMobileJqueryMobile網(wǎng)絡(luò)布局網(wǎng)絡(luò)布局jQuery Mobile的網(wǎng)絡(luò)布局支持2-5列的表格布局。使用CSS屬性配置的div元素。nJqueryMobileJqueryMobile網(wǎng)格布局網(wǎng)格布局布局樣式屬性布局樣式屬性示例示例含義

5、含義ui-grid-a a b c d e兩列ui-grid-b三列ui-grid-c四列ui-grid-d五列ui-grid-solo a合并nJqueryMobileJqueryMobile響應(yīng)式布局響應(yīng)式布局nJqueryMobileJqueryMobile事件介紹事件介紹nJqueryMobileJqueryMobile事件介紹事件介紹nJqueryMobileJqueryMobile頁(yè)面事件頁(yè)面事件nJqueryMobileJqueryMobile頁(yè)面事件頁(yè)面事件nJqueryMobileJqueryMobile頁(yè)面事件頁(yè)面事件nJqueryMobileJqueryMobile頁(yè)面事

6、件示例結(jié)果頁(yè)面事件示例結(jié)果n打開(kāi)頁(yè)面一時(shí)n頁(yè)面一mobileinitn頁(yè)面一pagecreaten頁(yè)面一pageinitn頁(yè)面一pagebeforeshown頁(yè)面一pageshow n跳轉(zhuǎn)到頁(yè)面二時(shí)n頁(yè)面二pagecreaten頁(yè)面二pageinitn頁(yè)面二pagebeforeshown頁(yè)面二pageshown從頁(yè)面二跳回頁(yè)面一時(shí)n頁(yè)面二pagebeforehide n頁(yè)面二pagehide nJqueryMobileJqueryMobile觸摸事件觸摸事件nJqueryMobileJqueryMobile滑動(dòng)事件滑動(dòng)事件nJqueryMobileJqueryMobile滾動(dòng)事件滾動(dòng)事件nJq

7、ueryMobileJqueryMobile方向事件方向事件n滑動(dòng)到頁(yè)面二n滑動(dòng)效果nJqueryMobileJqueryMobile頁(yè)面滑動(dòng)頁(yè)面滑動(dòng)n頁(yè)面返回（不建議使用）nbackn頁(yè)面跳轉(zhuǎn)：njQuery.mobile.changePage(about/us.html， options )n加載外部頁(yè)面：加載一個(gè)外部頁(yè)面，附加其內(nèi)容，并將其插入到DOMnjQuery.mobile.loadPage( url , options )禁止禁止ajxaajxa跳轉(zhuǎn)有兩種情況：跳轉(zhuǎn)有兩種情況：1、禁止局部ajax跳轉(zhuǎn)在a標(biāo)簽中添加下面的屬性：data-ajax=“false”2、禁止全局ajax

8、跳轉(zhuǎn) $.mobile.ajaxEnabled=falsenJqueryMobileJqueryMobile頁(yè)面跳轉(zhuǎn)頁(yè)面跳轉(zhuǎn)nJqueryMobileJqueryMobile頁(yè)面加載原理頁(yè)面加載原理頁(yè)面跳轉(zhuǎn)建議使用$.mobile.changePage ，不使用緩存的back jqm的跳轉(zhuǎn)機(jī)制，簡(jiǎn)單的說(shuō)jqm的默認(rèn)跳轉(zhuǎn)方式，也就是$.mobile.changePage這種方式，原理是ajax跳轉(zhuǎn)。就是通過(guò)ajax動(dòng)態(tài)的把目標(biāo)頁(yè)面的內(nèi)容加載到當(dāng)前的dom中。例如：有兩個(gè)頁(yè)面，頁(yè)面一id=“index_page1”，頁(yè)面二id=“index_page2”,當(dāng)從頁(yè)面一跳轉(zhuǎn)到頁(yè)面二時(shí)，會(huì)把頁(yè)面二的內(nèi)容

9、加載到頁(yè)面一的dom里面。因此如果都是ajax跳轉(zhuǎn)，只需要在第一個(gè)頁(yè)面引用所需的js和css即可。nJqueryMobileJqueryMobile頁(yè)面加載原理頁(yè)面加載原理n打開(kāi)頁(yè)面一時(shí)如圖：DOM樹(shù)中只有頁(yè)面一的domnJqueryMobileJqueryMobile頁(yè)面加載原理頁(yè)面加載原理n跳轉(zhuǎn)到頁(yè)面二時(shí)如圖：頁(yè)面二的page內(nèi)容加載到了整個(gè)頁(yè)面的dom中頁(yè)面緩存配置：data-dom-cache=truenJqueryMobileJqueryMobile常見(jiàn)問(wèn)題和注意事項(xiàng)常見(jiàn)問(wèn)題和注意事項(xiàng)1.頁(yè)面跳轉(zhuǎn)樣式丟失將js和css的引用放到div page頁(yè)面里面2.$.mobile.chang

10、ePage不能跳轉(zhuǎn)，而window.location.href卻可以正常跳轉(zhuǎn)?？缭絾?wèn)題，放入web容器中即可。3.重復(fù)綁定問(wèn)題，網(wǎng)上已經(jīng)有很多人給出解決辦法，我的解決辦法是在綁定事件前先解除綁定，將綁定事件寫到pageshow中： $(document).off(pageshow).on(pageshow,#register1,function()$(#aaa).off(tap).on(tap,function()$.mobile.changePage(/html/main.html,transition:slidefade);); );nJqueryMobileJqueryMobile常見(jiàn)問(wèn)

11、題和注意事項(xiàng)常見(jiàn)問(wèn)題和注意事項(xiàng)4.選擇性清除。有時(shí)我們有這樣的需求，a頁(yè)面是菜單主頁(yè)面，b頁(yè)面是查詢頁(yè)面，c頁(yè)面是詳情查看頁(yè)面，一般操作流程時(shí)a跳轉(zhuǎn)到b，點(diǎn)擊b中的list列表在顯示c頁(yè)面的詳情，這時(shí)我們希望實(shí)現(xiàn)的是，從b頁(yè)面跳轉(zhuǎn)到c頁(yè)面不清空b頁(yè)面的內(nèi)容，這樣c頁(yè)面返回到b頁(yè)面時(shí)，b頁(yè)面的內(nèi)容還是點(diǎn)擊之前的，不重新加載，不然翻頁(yè)的內(nèi)容定位不到，但是b頁(yè)面返回到a頁(yè)面時(shí)，b頁(yè)面內(nèi)容就可以清楚，因?yàn)閺牟藛雾?yè)進(jìn)入b頁(yè)面可以重新查詢。前面在網(wǎng)上看有個(gè)人提供了方法，但一個(gè)是比較復(fù)雜，還一個(gè)是基于以前老的版本，1.4不能使用，我的做法是判斷返回的頁(yè)面，選擇性清空。$(document).on(pageh

12、ide, #register_query1, function(event) var var_url = event.target.baseURI; if(var_url != null & var_url.indexOf(/main.html)0) $(event.target).remove(); );nJqueryMobileJqueryMobile各類組件刷新方法各類組件刷新方法1、Combobox or select dropdowns var myselect = $(#sCountry); myselect0.selectedIndex = 3; myselect.sel

13、ectmenu(refresh);or$( .selector ).selectmenu( refresh, true );2、Listviews $(#mylist).listview(refresh);3、Slider control $(#slider).val(80).slider(refresh);4、Toggle switch var myswitch = $(#toggle); myswitch0.selectedIndex = 1; myswitch .slider(refresh);nJqueryMobileJqueryMobile各類組件刷新方法各類組件刷新方法5、Radi

14、o buttons $(inputvalue=grid).attr(checked,true).checkboxradio(refresh);or$( .selector ).prop(checked, true ).checkboxradio(refresh);6、Checkboxes $(#checkbox-1).attr(checked,true).checkboxradio(refresh);or$( .selector).prop(checked, true ).checkboxradio(refresh );7、Buttons $( type=submit ).button( re

15、fresh );or$( .selector ).buttonMarkup( refresh );8、Column-Toggle Table $( .selector ).table-columntoggle( refresh );9、Reflow Table $( .selector ).table( refresh );nPhonegap介紹nPhonegap是一個(gè)用基于HTML、Css和javascript來(lái)創(chuàng)建移動(dòng)跨平臺(tái)應(yīng)用的快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用iphone、Android、Symbian、wp8、wp7、bada、blackberry等智能手機(jī)的核心功能-包括地理定位，加

16、速器、聯(lián)系人、聲音和振動(dòng)等，此外phonegap擁有豐富的插件可以調(diào)用。n以前由Nitobi公司開(kāi)發(fā)，后由Adobe收購(gòu)擁有。nPhonegapPhonegap支持的平臺(tái)支持的平臺(tái)nPhonegapPhonegap提供提供APIAPI列表列表標(biāo)準(zhǔn)標(biāo)準(zhǔn)apiapi之外的功能支持自定義插件擴(kuò)展之外的功能支持自定義插件擴(kuò)展nphonegap3.0以后不提供下載，必須通過(guò)在線安裝n首先安裝nodejsn/n執(zhí)行命令：nnpm install -g phonegapnPhonegapPhonegap安裝安裝nAndroid系統(tǒng)執(zhí)行命令：nphonegap create

17、項(xiàng)目名稱ncd 項(xiàng)目名稱nphonegap run androidnIOS系統(tǒng)執(zhí)行：hello為文件夾名稱，HelloWorld項(xiàng)目名稱nphonegap create hello com.example hello HelloWorldncd hellonphonegap platform add iosnphonegap build iosn開(kāi)發(fā)環(huán)境搭建，創(chuàng)建一個(gè)開(kāi)發(fā)環(huán)境搭建，創(chuàng)建一個(gè)PhonegapPhonegap工程工程nPhonegap3.X以后在線安裝包不集成api插件，需要手動(dòng)命令安裝，例如設(shè)備信息Device API的安裝：nphonegap plugin add work-i

18、nformationnorg.apache.cordova.battery-statusnorg.apache.cordova.device-motionnorg.apache.cordova.device-orientationnorg.apache.cordova.geolocationnorg.apache.cordova.cameranorg.apache.cordova.media-capturenorg.apache.cordova.medianorg.apache.cordova.filenorg.apache.cordova.file-transfernorg.apache.c

19、ordova.dialogsnorg.apache.cordova.vibrationnorg.apache.cordova.contactsnorg.apache.cordova.globalizationnorg.apache.cordova.splashscreennorg.apache.cordova.inappbrowsernorg.apache.cordova.consolenPhonegap3.XPhonegap3.X以后引入以后引入apiapi插件插件其他插件路徑nPhonegapPhonegap示例示例nPhonegap3.X以后在線安裝包不集成api插件，需要手動(dòng)命令安裝，

20、例如設(shè)備信息Device API的安裝：nphonegap plugin add work-informationnorg.apache.cordova.battery-statusnorg.apache.cordova.device-motionnorg.apache.cordova.device-orientationnorg.apache.cordova.geolocationnorg.apache.cordova.cameranorg.apache.cordova.media-capturenorg.apache.cordova.medianorg.apache.cordova.filenorg.apache.cordova.file-transfernorg.apache.cordova.dialogsnorg.apache.cordova.vibrationnorg.apache.cordova.contactsnorg.apache.cordova.globalizationnorg.apache.cordova.splashscreennorg.apache.cordova.inappbrowsernorg.apache.cordova.consolenPhonegap3.XP