上课简报档-JqueryMobilPhoneGap_fdc_note

2013/10/28 1 跨平台⼿手機開發實務恆逸資深講師戴⽟玉佩[e-mail]&PhoneGap12認識jQueryMobile+PhoneGap• jQueryMobile（第1章~第7章）• HTML5+CSS+JavaScritpt• 提供適合⼿手持裝置的UILayout• PhoneGap（第8章~第21章）• 提供統⼀一的JavaScritpt來操控不同Mobile平台中的硬體設備• 可發佈在多個平台• 只要會JavaScript即可• 完全免費 23認識jQueryMobile+PhoneGap• 螢幕畫⾯面尺⼨寸、⻑⾧長寬⽐比、解析度⼤大不同• jQueryMobile藉由HTML、CSS⾃自動調整畫⾯面⽐比例來配合各種尺⼨寸的Device• ⼿手機硬體無法由HTML操控• PhoneGap提供JavaScript程式庫34為何jQueryMobile+PhoneGap• ⾨門檻低• 成本低• 快速開發• 跨平台 45開始jQueryMobile• jQuery:logic,interaction• jQueryMobile:layout，創造符合⼿手機的介⾯面• 下載課程資源檔：• http://goo.gl/MK4LsO• 解壓縮後，將jQueryMobile⺫⽬目錄Copy到WebServer上• 啟動WebServer• 使⽤用開發⼯工具撰寫jQueryMobile的網⾴頁:DreamWeaver,Eclipse56設定Server（⼀一） • 開啟DreamWeaver，從[Site]-[NewSite]:• 在「Site」輸⼊入SiteName與Folder• 注意：62013/10/28 2 7建⽴立HelloWorld.html(⼀一)1. 連結jQueryMobile官網，點選Download2. 在CH00_Fundation新增HelloWorld.html• 在HelloWorld.html中加上引⽤用CSS與JavaScript!DOCTYPEhtml html head metahttp-equiv=Content-Typecontent=text/html;charset=Big5 titleHelloWorld/title linkrel=stylesheethref=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css/ scriptsrc=http://code.jquery.com/jquery-1.9.1.min.js/script scriptsrc=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js/script /head ... 78建⽴立HelloWorld.html(⼆二)• 加上pagebody divdata-role=page divdata-role=header h1HEADER/h1 /div divdata-role=content h1CONTENT/h1 ahref=#data-role=buttonTestBUTTON/a /div divdata-role=footer h1FOOTER/h1 /div /div /body 89建⽴立HelloWorld.html(三)• 注意要加ViewPorthead metahttp-equiv=Content-Typecontent=text/html;charset=Big5 metaname=viewport
content=width=device-width,initial-scale=1 title/title linkrel=stylesheethref=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css/ scriptsrc=http://code.jquery.com/jquery-1.9.1.min.js/script scriptsrc=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js/script /head 9Chapter01jQueryMobile基本⾴頁⾯面與對話框 1011加上Style• Sample1-2.html!DOCTYPEhtml html head ... style div[data-role=content]h1{ text-shadow:1px3px2px#999; } div[data-role=content]p{ font:1em/1.5Georgia,TimeNewRoman,Times,serif; } /style /head 1112多⾴頁結構 • Sample1-3.html：注意這裡有兩個pagedivdata-role=pageid=home ... /div divdata-role=pageid=detail divdata-role=header h1Detail/h1 /div divdata-role=content h1Easytouse:Tryitnow!/h1 pjQueryMobile'semphasisonsemanticmarkupandprogressiveenhancementmakesitsupereasytouse.... /p ahref=#Demos&documentation/a ahref=#Resources:Books,plugins,tutorials/abr ahref=#homedata-role=buttonGobackHome/a /div /div 122013/10/28 3 TitleonAjaxNavigation • Sample1-4.html(加上data-title)13divdata-role=pageid=homedata-title=HomePage ... /div divdata-role=pageid=detaildata-title=DetailPage ... /div 14帶出下個Page• Sample1-5.html中以3種⽅方式來帶出Sample1-5-1.html• 預設⽅方式：AJAX• 對話窗（可設定對話窗出現的⽅方式）• ⾮非Ajax⽅方式• ahref=...若為外部網站的網⾴頁，應為： ahref=Sample1-5-1.htmldata-role=buttonGotoSample1-5-1withAjax/a ahref=Sample1-5-1.htmldata-role=buttondata-rel=dialog
data-transition=popGotoSample1-5-1withDialog/a ahref=Sample1-5-1.htmldata-role=buttondata-ajax=false
GotoSample1-5-1withoutAjax/a ahref=http://maps.google.comdata-role=buttondata-rel=externalGotoGoogleMap/a 1415回到上⼀一⾴頁 • Sample1-5-1.html中以2種⽅方式來回到Sample1-5.html• 若data-transition⽤用slide，要注意back的⽅方向(• Sample1-6.html• Sample1-6-1.htmlahref=#data-role=buttondata-icon=backdata-rel=backdata-transition=slidedata-direction=reverseGoback/a ahref=Sample1-5.htmldata-role=buttonGoBack/a ahref=#data-role=buttondata-rel=backGoBack/a ahref=Sample1-6-1.htmldata-role=buttondata-icon=arrow-rdata-transition=slideGotoSample1-6-1.htmlwithAJAX/a 1516發mail、打電話、傳簡訊 • Sample1-7.html加⼊入下列buttonahref=mailto:[e-mail]-role='button'
MailtoAdmin/a ahref=mailto:[e-mail]?cc=[e-mail]&subject=Test%20Mail&body=This%20is%20a%20test%20from%20HTML5data-role='button'MailtoPattywithContent/a ahref=tel:[phone]data-role='button'MakePhoneCalltoUCOM/a ahref=sms:0987654321data-role='button'SendMSGtoSomeone/a 1617PageTransition• 6種Transition• Sample1-8.html加⼊入使⽤用不同Tansition⽅方式的button來帶出Sample1-8-1.html• fade• flip• pop• Slide• slideup• slidedown1718PageTransition • Sample1-8.html加⼊入下列buttonahref=Sample1-8-1.htmldata-role=button GotoSample1-8-1.htmlwithdefault/a ahref=Sample1-8-1.htmldata-role=buttondata-transition=fade GotoSample1-8-1.htmlwithfade/a ahref=Sample1-8-1.htmldata-role=buttondata-transition=flip GotoSample1-8-1.htmlwithflip/a ahref=Sample1-8-1.htmldata-role=buttondata-transition=pop GotoSample1-8-1.htmlwithpop/a ahref=Sample1-8-1.htmldata-role=buttondata-transition=slide GotoSample1-8-1.htmlwithslide/a ahref=Sample1-8-1.htmldata-role=buttondata-transition=slidedown GotoSample1-8-1.htmlwithslidedown/a ahref=Sample1-8-1.htmldata-role=buttondata-transition=slideup GotoSample1-8-1.htmlwithslideup/a182013/10/28 4 19緩存⾴頁⾯面 • 在Smple1-9-1.htm