1. JQUERY MOBILE APPJQUERY MOBILE + THEMEROLLER + CODIQA +ELECTRICPLUM + WEINRE divaka / 2012/05/28

2. Web Based System App 3. .., APP, ! 4. APP 1 ~ 3 Device.. 5. 6. Demo Web http://124.9.6.27:8080/sbma/entrance.jsp APP http://124.9.6.27:8080/sbma/mobile/index.html 7. ELECTRICPLUMHTTP://WWW.ELECTRICPLUM.COM/SIMULATOR.ASPX APP 8. iOS Device 9. .. iOS Device iOS Device Touch Behavior No Scrollbar Re-render Component iPad, iPhone .. 10. JQUERY MOBILEHTTP://JQUERYMOBILE.COM/ APP 11. jQuery Mobile A unified, HTML5-based user interface systemfor all popular mobile device platforms, built onthe rock-solid jQuery and jQuery UI foundation.Its lightweight code is built with progressiveenhancement, and has a flexible, easilythemeable design. 12. jQuery Mobile jQuery , , Open-Source, Device () Responsive Design 13. Responsive DesignDevice 14. jQuery Mobile Code Trade-off phoneGap App 15. jQuery Mobile http://www.jqmgallery.com/ 16. jQuery UI Componenthttp://jquerymobile.com/test/ 17. jQuery Mobile Forum Blog Resources Tutorial jQuery Mobile Tutorial: Creating a Restaurant Picker Web App http://msdn.microsoft.com/zh-tw/hh875190 jQuery Mobile HTML5 Web App jQuery Mobile Mobile Web & HTML5 Performance Optimization 18. JQUERY MOBILELETS DO IThttp://kuro.tw/blog/2012/02/15/hello-jquery-mobile-jquery-mobile-2 19. jQuery Mobile Lets do it Download jQuery Mobile Library http://jquerymobile.com/download/ (CDN) Download Basic Project (dropbox) https://www.dropbox.com/home/front_end_study/2012_05_28%20(%E4%B8%80)/divaka 20. Step1 (List-View) data-role

My Title

Footer content

21. Step2

• Overview
• ITEM
• ITEM
• ITEM
• ITEM
• ITEM

22. Step3

• Overview
• ITEM
• ITEM
• ITEM
• ITEM
• ITEM

23. Step4 (Nested list)

,

• Overview
• ITEM A
  1. A-1
  2. A-2
  3. A-3

24. Step5 (Thumbnails) li , jQuery Mobile Photoshop

Description

25. Step6 Split Button list data-icon=gear iconSet ()ITEM A 26. Step7 (HyperLink) Data-transition ()page2

• another View
• view2

27. CSS FireFox class CSS & http://stackoverflow.com/questions/9798158/how- does-jquery-mobile-hide-mobile-safaris- addressbar 28. THEMEROLLERHTTP://JQUERYUI.COM/THEMEROLLER/ jQuery Mobile UI Theme 29. jQuery UI Mobile font, corner radius, header, toolbar, content CSS 30. CODIQAHTTP://WWW.CODIQA.COM/ jQuery Mobile-based APP 31. Lets See 32. .. BUG library JS code 33. WEINREHTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/ FireBug ( MobileJavaScript) 34. DEMO// Libraryhttp://nodejs.org/#download// script , IP// weinre servercmd > node weinre// IP debug Browser APPhttp://localhost:8080/client/#anonymous//http://kuro.tw/sites/default/files/images/weinre-6.png 35. []Node.js . node.JS install Weinre Debug (Mobile Web) 36. http://www.mobilexweb.com/emulators 37. FUTURE WORKPhoneGap Web Code