jQuery mobile

Pascal Naujoks | pn012@hdm-stuttgart.de | November 2011

 High market share
 Supports media queries
 Actively tested

 Low market share
 Supports media queries
 Tested sometimes

 Does not support media queries
 No jQuery at all
 Fallback to simple HTML and CSS

 Semantic  Borders  … all the magic!
 WAI ARIA  Shadows
 Input-types  Round corners
 data-roles  Gradients
 …  …

<body> <body>
Page Page 1

Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur
adipiscing elit. Nunc id nibh adipiscing elit...
tellus, vel malesuada
sapien. Mauris eget nunc Page 2
ligula, condimentum mattis
velit. Vivamus erat Phasellus at justo augue.
augue, consectetur id Sed sit amet lorem risus.
malesuada vitae, dignissim In lacus ipsum…
ac dui. Ut eu nisi lorem.
Donec id lacus mauris. Page 3
Named sed lacus di ninc…
Praesent et magna sit
</body> amet eros bibendum
imperdiet…

</body>

Page

Header

Page Title

Content

Page content goes here

Footer

Page Footer

 data-role="page"  data-transition="pop "
 data-role="header"  data-position="fixed"
 data-role="content"  data-rel="dialog"
 data-role="footer"  data-title="Page Title Foo"
 data-role="navbar"  data-prefetch="true"
 data-role="controlgroup"  data-url="foo.html"
 data-role="button"  data-theme="b"
 data-role="list-divider"  data-fullscreen="true"
 data-role="listview "  data-icon="delete"
 …  …

 tab  tabhold

 swipe  scrollstart
 swipeleft  scrollstop
 swiperight

 orientationchange
 portrait

 landscape

<body>
Page 1

Lorem ipsum dolor sit amet, consectetur • pagebeforechange
adipiscing elit...

• pagechange
Page 2
• pagechangefailed
Phasellus at justo augue. Sed sit amet
lorem risus. In lacus ipsum…

</body>

<body>
Page 1

Lorem ipsum dolor sit amet, consectetur
adipiscing elit...

Page 2

Phasellus at justo augue. Sed sit amet
lorem risus. In lacus ipsum…

• pagebeforeload
Page 3

Praesent et magna sit amet eros
bibendum imperdiet…
• pageload
• pageloadfailed
</body>

 Amherst College - https://www.amherst.edu/mobile/  Kennesaw State University - http://m.kcc.edu/
 Austin Peay State University - http://m.apsu.edu/  Keuka College - http://m.keuka.edu/
 Baylor University - http://m.baylor.edu/  Lawrence Technological University - http://m.ltu.edu/
 Bellarmine University - http://m.bellarmine.edu/  Lehigh University - http://www4.lehigh.edu/mobile/default.aspx
 Butler University - http://www.butler.edu/mobile/  Lynchburg College - http://m.lynchburg.edu/
 Cal State Monterey Bay - http://m.csumb.edu/  Mary Baldwin College - http://www.mbc.edu/m/
 Columbia University - http://m.columbia.edu/  Marywood University - http://mobile.marywood.edu/
 Dallas Theological Seminary - http://mobile.dts.edu/  Mount Olive College - http://m.moc.edu/
 Delaware Valley College - http://www.delval.edu/mobile  Pennsylvania State University World Campus -
 Eastern Washington University - http://m.ewu.edu/ http://m.worldcampus.psu.edu/
 EckerdCollege - http://m.eckerd.edu/  Pittsburg State University - http://m.pittstate.edu/
 Edison State College - https://www.edison.edu/m/  Providence College - http://m.providence.edu/
 Fort Lewis College - http://explore.fortlewis.edu/mobile/  St. Mary's College of Maryland - http://mobile.smcm.edu/
 George Fox University - http://m.georgefox.edu/  St. Olaf College - http://m.stolaf.edu/
 Hamilton College - http://www.hamilton.edu/mobile/index.html  Stanford University - http://m.stanford.edu/
 Hampden-Sydney College - http://m.hsc.edu/  University of Florida - http://m.ufl.edu/
 Harding University - http://mobile.harding.edu/  University of Michigan - http://m.umich.edu/
 Houghton College - http://m.houghton.edu/  University of North Texas - http://m.unt.edu/
 Indiana University - https://m.iu.edu/kme-prd/home  University of Scranton - http://m.scranton.edu/
 Istanbul Bilgi University SIS / Turkey -  University of South Florida - http://m.usf.edu/
https://register.bilgi.edu.tr/m  University of Southern Mississippi - http://m.usm.edu/
 Istanbul Bilgi University BilgiOnline / Turkey -  Vanderbilt University - http://m.vanderbilt.edu/
https://register.bilgi.edu.tr/mdl  Wayne State University - http://mobile.wayne.edu/
 Kankakee Community College - http://m.kcc.edu/  Weber State University - http://m.weber.edu/
 West Chester University - http://m.wcupa.edu/

 Quickly built usable and accessible  Does not use new HTML5 semantic
sites for all kind of mobile devices tags (<div data-role=“header“>
 Very easy to learn instead of <header>)
 Known jQuery based framework  No 100% complete HTML – only
fallback without enabled JavaScript
 Great and huge community
 IMHO a bit too addicted to the
 Expandable with plugins and themes
“Apple-Lock”
 Very lightweight (31KB for jQuery +
24KB for jQuery Mobile) compared to  Not quite as fast as native Apps
other frameworks  Limited capabilities (DOM-Size etc.)
 No f****ng Appstore or something when  Still beta with some bugs
you build “Apps” with jQuery Mobile
 Use your existing and favorite
IDE, Repository, etc. for building sites
with jQuery Mobile

Sincerely, your jQuery fanboy…

jQuery mobile

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie jQuery mobile

Ähnlich wie jQuery mobile (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery mobile