Downloaded 91 times
Uploaded byJoris Graaumans
jQuery Mobile Introduction
The document is a presentation on jQuery Mobile, delivered by Joris Graaumans at the Dutch Mobile Conference 2012. It covers an introduction to jQuery Mobile as a user interface system that works across various mobile platforms, along with fundamental design principles and practical examples for navigation, page transitions, and form handling. It emphasizes the simplicity of using jQuery Mobile in web development and encourages attendees to explore its capabilities.
More Related Content
Similar to jQuery Mobile Introduction
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
jQuery Mobile Introduction
- 1. jQuery Mobile! Dutch MobileConference 2012! June 9!
- 2. Introduction! • Joris Graaumans! • Lecturer @ Fontys University of Applied Sciences! • Bachelor's program ICT & Media Design! – web development! – interaction & visual design! – media strategy! !
- 3. What keeps me busy?
- 4. Agenda • Teaching web development • What is jQuery Mobile? • jQuery Mobile Demo
- 5. Teaching Web Development • HTML / CSS / JavaScript • PHP / Web APIs • Mobile web • Augmented / Virtual Reality • Flash AcJonScript 3.0
- 6. What is jQueryMobile? "A unified user interface system that works seamlessly across all popular mobile device pla4orms, built on the rock-‐solid jQuery and jQuery UI foundaJon." • Started in August 2010 • Current version: 1.1.0 – April 13, 2012 • jquerymobile.com 6
- 7. Design principles • User Interface System – Mobile Web ApplicaJons – HTML5 based • One single app or site – All popular mobile device plaorms – Tested on a large set of devices and plaorms
- 8. Design principles • "Super easy to use" – SemanJc markup – Use regular HTML with data-‐* a^ributes • Flexible – Themes – CSS styles – ScripJng
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. jQuery How To • pages – content – header – footer • list views • page transiJons • navigaJon bars • forms • events
- 19. index.html • Simple page • Fixed header and footer • Theming
- 20. index2.html Typically used for navigaJon between pages • Basic <ul> and <li> elements • Listviews – data-‐role="listview" – inset appearance: data-‐inset="true" • Listheaders – data-‐divider-‐theme (on the <ul> element)
- 21. index3.html • TransiJons between pages • Links: <a href="#idOfThePage"> ... </a>! • Links are loaded with Ajax by JQM – page transiJons • Dialogs: no history & pop-‐up • Different transiJon types (pop, slide, etc)
- 22. index4.html • NavigaJon bar: data-role="navbar" • NavigaJon bu^ons, Go back, Go Home • Icons – data-‐icon="home" – data-‐icon="arrow-‐l" – data-‐icon="plus" – data-‐icon="back" – etc.
- 23. index5.html • Forms • Use regular HTML5 Forms • Improve styling – data-‐role="fieldcontain" • Group a set of controls – data-‐role="controlgroup"
- 24. ScripJng • Pageinit / pageshow events • Form submit • Page transiJon • index6.html
- 25. LimitaJons of jQuery Mobile • Try it and find out • Performance • jQuery Mobile does not try to mimic – iOS – Android – Windows • NaJve app? – Use PhoneGap as a wrapper.
- 26. Conclusions • jQuery Mobile is super easy to use – declaraJve style – not very different from wriJng regular HTML • Builds on HTML / JQuery / jQuery UI • Go and give it a try!
- 27. References • h^p://jquerymobile.com/demos/1.1.0/docs/ about/gemng-‐started.html • h^p://jquerymobile.com/themeroller/ • Tool for a quick GUI setup: h^p://codiqa.com/
- 28. Please fill in this survey h^p://Jnyurl.com/appuex
- 29. Contact • j.graaumans@fontys.nl • @JorisGraaumans