Download - jQueryMobile Jump Start
![Page 1: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/1.jpg)
jQueryMobile Jump Start
Haim MichaelDecember 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 http://youtu.be/zFSTN8JnFEk.
Li fe M
ic hae l .c o
m
![Page 2: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/2.jpg)
Table of ContentLi fe M
ic hae l .c o
m● 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
![Page 3: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/3.jpg)
Introduction to jQueryMobile● 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.
Li fe M
ic hae l .c o
m
www.jquerymobile.com www.jqueryui.comwww.jquery.com
![Page 4: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/4.jpg)
Introduction to jQueryMobileLi fe M
ic hae l .c o
m
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script></head><body>
<div data-role="page"><div data-role="header">
<h1>Simple List Demo</h1></div>
![Page 5: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/5.jpg)
Introduction to jQueryMobileLi fe M
ic hae l .c o
m
<div data-role="content"> <ul data-role="listview" data-theme="c">
<li><a href="http://www.google.com">google</a></li><li><a href="http://www.oracle.com">oracle</a></li><li><a href="http://www.microsoft.com">microsoft</a></li><li><a href="http://www.ibm.com">ibm</a></li><li><a href="http://www.intel.com">intel</a></li><li><a href="http://www.samsung.com">samsung</a></li><li><a href="http://www.nokia.com">nokia</a></li><li><a href="http://www.apple.com">apple</a></li><li><a href="http://www.sony.com">sony</a></li><li><a href="http://www.lenovo.com">lenovo</a></li>
</ul></div><div data-role="footer">
<h4>lifemichael</h4></div> </div></body></html>
![Page 6: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/6.jpg)
Introduction to jQueryMobileLi fe M
ic hae l .c o
mhttp://www.lifemichael.com/jqmdemo.html
![Page 7: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/7.jpg)
Clean Semantic HTML● 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.
Li fe M
ic hae l .c o
m
![Page 8: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/8.jpg)
Web Browsers Compatibility● The jQueryMobile library is compatible with most mobile
web browsers.
Li fe M
ic hae l .c o
m
![Page 9: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/9.jpg)
Platforms Compatibility● The jQueryMobile library is compatible with most mobile
platforms.
Li fe M
ic hae l .c o
mhttp://jquerymobile.com/gbs/
![Page 10: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/10.jpg)
HTML5 Capabilities● The jQuery Mobile utilizes HTML5 capabilities. Using
jQueryMobile we indirectly exploit the power of HTML5.
Li fe M
ic hae l .c o
mHTML5 Jump Start
![Page 11: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/11.jpg)
Handling User Events● The jQuery Mobile library supports new events relevant
for mobile platforms, such as touching and dragging.
Li fe M
ic hae l .c o
m
Handling Touch Events Code Sample
![Page 12: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/12.jpg)
Themes Frameworks● 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.
Li fe M
ic hae l .c o
m
http://jquerymobile.com/themeroller/
![Page 13: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/13.jpg)
The Codiqa Designer ToolLi fe M
ic hae l .c o
m● Codiqa is a powerful drag-and-drop IDE for creating
cross-platform mobile hybrid applications and websites.
https://codiqa.com/
![Page 14: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/14.jpg)
JQueryMobile AlternativesLi fe M
ic hae l .c o
mhttp://www.kendoui.com/
http://www.sencha.com/products/touch/
http://app-framework-software.intel.com/
http://ionicframework.com/
![Page 15: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/15.jpg)
Learning Resources● http://www.jquerymobile.com
This is jQueryMobile main website. It includes detailed
documentation and links for other relevant resources.
● http://www.jqmgallery.com
This website includes samples for hybrid applications for mobile
telephone that were developed using jQueryMobile.
● http://abelski.lifemichael.com
This website includes an online free course for learning how to
use jQueryMobile. You will find it inside the JavaScript
frameworks category.
Li fe M
ic hae l .c o
m
![Page 16: jQueryMobile Jump Start](https://reader038.vdocuments.us/reader038/viewer/2022100523/54c800f94a7959335d8b45e8/html5/thumbnails/16.jpg)
Questions & Answers● 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 http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.
Li fe M
ic hae l .c o
m