Download to read offline
Uploaded byAbed Maatalla
Jquery mobile
This document discusses JQuery Mobile, a cross-platform framework. It allows building mobile web apps that have a native look and feel without needing to learn native languages. JQuery Mobile uses data attributes to control layout and styling. It requires JQuery, HTML, and CSS. The document demonstrates building a simple recipe app called DOOZ using JQuery Mobile, with a sidebar menu, search, and content display.
Jquery mobile
- 1.
- 2.
- 3. JQuery Mobile Cross Platform WhyJQuery mobile? limits. How far JQuery mobile will take you? Where you start? Demo
- 4. JQuery Mobile Why jquerymobile Widest cross platform Provides native look & feel No need to learn native languages Easy layout & theming Touch friendly user interface components Tried & tested ( whole team working on it)
- 5. JQuery Mobile limits Performance. Restricted accessto device resources. Network dependency. Not a silver bullet ( may not be perfect).
- 6. JQuery Mobile Layout data-* attributes data-role data-role= "listview" data-role = "button"
- 7. JQuery Mobile data-theme ="d" data-rel = "close" data-icon = "bars" data-position = "fixed"
- 8. JQuery Mobile data-role =page data-role = header data-role = content data-role = footer
- 9. Code Slide /High contrast HTML <!doctype html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> </head> <body> <div data-role=”page”> <div data-role=”header”> … </div> <div data-role=”content”> … </div> <div data-role=”footer”> … </div> </div> </body>
- 10. Code Slide /High contrast HTML <!doctype html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> </head> <body> <div data-role=”page”> <div data-role=”header”> … </div> <div data-role=”content”> … </div> <div data-role=”footer”> … </div> </div> </body>
- 11. JQuery Mobile Requirements: - JQuery -HTML - CSS
- 12. JQuery Mobile Sublime Server tohost application locally - On mac anvil - On windows iis ( internet information service)
- 13. JQuery Mobile We aregoing to build a simple Jquery mobile. Application called DOOZ. DOOZ is for recipes. Sidebar menu with all recipes. Search in sidebar menu. A nice content display.
- 14.
- 15.
- 16.