Your SlideShare is downloading. ×
jQueryMobile Jump Start
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQueryMobile Jump Start


Published on

Practical jump start for learning how to use the jQueryMobile library.

Practical jump start for learning how to use the jQueryMobile library.

Published in: Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Haim Michael December 20th, 2013 All logos, trade marks and brand names used in this presentation belong to the respective owners. You can watch the video clip at jQueryMobile Jump Start
  • 2. ● Introduction to jQueryMobile ● Clean Semantic HTML ● Web Browsers Compatibility ● Platforms Compatibility ● HTML5 Capabilities ● Handling User Events ● Themes Framework ● The Codiqa Designer Tool ● jQueryMobile Alternatives ● Learning Resources ● Questions & Answers Table of Content
  • 3. ● The jQueryMobile JavaScript library allows us to create a unified user interface that works across most smartphone web browsers and tablets. ● The jQueryMobile library uses the well known jQuery library. ● If you are not familiar with JavaScript you might want to check my JavaScript Jump Start. Introduction to jQueryMobile
  • 4. <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href= "" /> <script src=""> </script> <script src= ""> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Simple List Demo</h1> </div> Introduction to jQueryMobile
  • 5. <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="">google</a></li> <li><a href="">oracle</a></li> <li><a href="">microsoft</a></li> <li><a href="">ibm</a></li> <li><a href="">intel</a></li> <li><a href="">samsung</a></li> <li><a href="">nokia</a></li> <li><a href="">apple</a></li> <li><a href="">sony</a></li> <li><a href="">lenovo</a></li> </ul> </div> <div data-role="footer"> <h4>lifemichael</h4> </div> </div> </body> </html> Introduction to jQueryMobile
  • 6. Introduction to jQueryMobile
  • 7. ● The jQuery Mobile is built on top of a simple usage of clean semantic HTML. ● When the web browser supports CSS and JavaScript, jQueryMobile applies progressive enhancements techniques that transform the semantic page into a rich interactive user interface one. Clean Semantic HTML
  • 8. ● The jQueryMobile library is compatible with most mobile web browsers. Web Browsers Compatibility
  • 9. ● The jQueryMobile library is compatible with most mobile platforms. Platforms Compatibility
  • 10. ● The jQuery Mobile utilizes HTML5 capabilities. Using jQueryMobile we indirectly exploit the power of HTML5. HTML5 Jump Start HTML5 Capabilities
  • 11. ● The jQuery Mobile library supports new events relevant for mobile platforms, such as touching and dragging. Handling Touch Events Code Sample Handling User Events
  • 12. ● We can create our own theme or use one of the many themes that were already created. ● The ThemeRoller provides us with a visual simple way for creating our own customized theme. Themes Frameworks
  • 13. ● Codiqa is a powerful drag-and-drop IDE for creating cross-platform mobile hybrid applications and websites. The Codiqa Designer Tool
  • 14. JQueryMobile Alternatives
  • 15. ● This is jQueryMobile main website. It includes detailed documentation and links for other relevant resources. ● This website includes samples for hybrid applications for mobile telephone that were developed using jQueryMobile. ● This website includes an online free course for learning how to use jQueryMobile. You will find it inside the JavaScript frameworks category. Learning Resources
  • 16. ● Two courses you might find interesting include Software Engineering in PHP more info Android 4.4 Java Applications Development more info HTML5 Cross Platform Mobile Applications more info ● If you enjoyed my lecture please leave me a comment at Thanks for your time! Haim. Questions & Answers