Getting Started with jQuery Mobile

Getting started with jQuery Mobile @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/codecamp-jqm

Follow along: bit.ly/codecamp-jqm http://farm6.staticﬂickr.com/5262/5565984041_8e335f0ec0.jpg

Sent text message Used application Used browser Accessed social networking
site Played games Listened to music 28.7% 33.7% 39.2% 52.1% 54.2% 75.9% Top Mobile Activities Mobile Content Usage (U.S.) 3 Month Avg. Ending Nov. 2012 vs. 3 Month Avg. Ending Aug. 2012 Source: comScore MobiLens

Facebook’s top mobile client is mobile web http://www.mobify.com/blog/mobile-stats-57-of-mobile-posting-on-facebook-from-mobile-web/

Twitter’s top mobile client is also mobile web Twitter via
http://www.lukew.com/ff/entry.asp?1413

“A UI framework for building cross-platform Mobile Web applications” “With
a single jQuery Mobile codebase we can create a uniﬁed user experience for nearly all mobile devices” jQ uery M obile 1.3

Simplify the journey http://i132.photobucket.com/albums/q24/BluSky07/MOBILE%20GAMES%202/OregonTrailv321.png

One codebase... CSS3

no device customer left behind iOS Android Blackberry Windows WebOS
Meego Kindle Nook Desktop Bada

Simpliﬁed Markup-Driven Development <div data-role="page"> <div data-role="header"> <h1>Page Header</h1> </div>
<div data-role="content"> <p>Hello jQuery Mobile!</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>

Uniﬁed User Interface

A-Grade experience C-Grade experience Progressive Enhancement

Responsive Design

Portrait Landscape Responsive Forms

Default Theme Alternate Theme Themable Styling

Accessible

http://www.ﬂickr.com/photos/wongdood/3379046643/sizes/z/in/photostream/ Getting Started in 60 seconds

Build a page #1 <h2>Movies</h2> <ul> <li><a href="#">Kung Fu Panda</a></li>
<li><a href="#">Pirates</a></li> <li><a href="#">X-Men<a><li> </ul>

Add jQuery Mobile #2 <head> <title>Step Two - Add jQuery
Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css" /> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> CDN repository or download via jquerymobile.com/download

Enhance: data- attributes #3 <div data-role="header"> <h2>Movies</h2> </div> <ul data-role="listview">
<li><a href="#">Kung Fu Panda</a></li> <li><a href="#">Pirates</a></li> <li><a href="#">X-Men></a><li> </ul>

More enhancements... <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Now Playing</li>
<li> <a href="#"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> </ul> </div>

Add theming and branding <div data-role="header" data-theme="b"> <h1>Movies</h1> </div> <div
data-role="content"> <ul data-role="listview" data-theme="a"> <li data-role="list-divider">Now Playing</li> <li> <a href="#"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> </ul> </div>

ThemeRoller http://jquerymobile.com/themeroller/

Single vs multi-page template <body>  <div
data-role="page" id="home" data-title="Welcome"> <div data-role="header"> <h1>Multi-Page</h1> </div> <a href="#contact-info" data-role="button">Contact Us</a> </div>  <div data-role="page" id="contact-info" data-title="Contacts"> <div data-role="header"> <h1>Contact Us</h1> </div> <div data-role="content"> Contact information... </div> </div> </body>

Single-page + prefetch <body> <div data-role="header"> <h1>Prefetch</h1> </div> <a href="contact.html"
data-prefetch="true">Contact Us</a> </body>

Ajaxiﬁed Navigation

Step 1, tap the button to navigate to another page
Ajaxiﬁed Navigation

Step 2, framework loads the next page side-by-side Ajaxiﬁed Navigation

Ajaxiﬁed Navigation Step 3, framework transitions to next page

Ajaxiﬁed Navigation Step 4, transition complete

Transitions <a href="#" data-role="button" data-transition="slide">slide</a>

Popups Usecases: •alerts •dialogs •tooltips •menus •forms •anything... <div data-role="popup"
id="popupWarning"> <div data-role="header" class="ui-corner-top"> <h1>Warning</h1> </div> <div data-role="content" class="ui-corner-bottom"> <p>No internet connection. Please try again later.</p> <a href="#" data-role="button" data-rel="back">OK</a> </div> </div> <a href="#popupWarning" data-rel="popup" data-role="button">Popup</a> $('#popupWarning').popup( "open" ); // Or dynamically open popup

<div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" id="home" data-icon="home"
class="ui-btn-active">Home</a></li> <li><a href="#" id="movies" data-icon="star">Movies</a></li> <li><a href="#" id="theatres" data-icon="grid">Theatres</a></li> </ul> </div> </div> Tab bars icon name standard icons custom icons

Segmented Control <div class="segmented-control ui-bar-d"> <div data-role="controlgroup" data-type="horizontal"> <a href="#in-theatres"
data-role="button" data-theme="b">In Theatres</a> <a href="#coming-soon" data-role="button" data-theme="d">Coming Soon</a> <a href="#top-rated" data-role="button" data-theme="d">Top Rated</a> </div> </div> <style> .segmented-control { text-align:center;} .segmented-control .ui-controlgroup { margin: 0.2em; } </style>

Keyboard sensitive input types

Radio & Checkbox

Slider & Switch

Gradients

Themes: defaults & inheritance page theme set to “e”

Events Diagram mobileinit $(document).on("mobileinit", function(){ $.mobile.defaultPageTransition = "slide"; $.mobile.ajaxEnabled =
false; }); pageinit $(document).on("pageinit", "#my-page", function(e) { // Setup event handler for login button $("#loginButton").on("click", function (e) { alert("Login clicked..."); }); });

<input type=button id="changePage" value="Open dynamic page"> <script> $( "#changePage" ).on(
"click", function() { // Create page markup var newPage = $("<div data-role=header><h1>Hi</h1></div>Hello Again!"); // Add page to page container newPage.appendTo( $.mobile.pageContainer ); // Enhance and open new page $.mobile.changePage( newPage ); }); </script> $.mobile API

Panels (sliding drawer) jQ uery M obile 1.3

Responsive tables jQ uery M obile 1.3

Responsive grids jQ uery M obile 1.3

More new features... jQ uery M obile 1.3 Listview autocomplete
data-clear-btn=”true” New icons

Inspiration jqmgallery.com

http://codiqa.com/

Adobe Shadow http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/ Simpliﬁes multi-device testing

http://www.ﬂickr.com/photos/oddne/3838032598/sizes/l/in/photostream/ How can we gain a performance advantage?

Prefer Native jQuery Mobile Widgets Custom message box adds overhead
Native inset list uses 80% less CSS! Compatible across all browsers! Simpliﬁes maintenance!

Remove Unused Themes <head> <meta charset="utf-8"> <title>Custom Theme</title> <meta name="viewport"
content="width=device-width, initial-scale=1"> <link rel=stylesheet href="css/theme/custom-theme.css" /> <link rel=stylesheet href="css/structure/jquery.mobile.structure.css"/> <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="jquery.mobile-min.js"></script> </head> jQuery Mobile’s structure ﬁle without default theme

Remove Unused Plugins Download Builder •grid •navbar •select •slider •textinput
•transitions •checkboxradio •collapsible •collapsibleset •controlgroup •ﬁeldContain •ﬁxedToolbar http://jquerymobile.com/download-builder/

Cache highly accessed read-only pages <div data-role="page" data-dom-cache="true"> <div data-role="header">
<h1>Popular Page</h1> </div> <div data-role="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit nisl et tortor tincidunt mattis. </div> </div>

Prefer the CDN-hosted resources <head> <meta charset="utf-8"> <title>CDN Hosted minified
and gzipped jQuery Mobile files</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> Example: bonus/conﬁg/https/https-template.html

Performance Analysis Tools http://developer.yahoo.com/yslow/mobile http://blaze.io/mobile

You have safely arrived at your destination http://i132.photobucket.com/albums/q24/BluSky07/MOBILE%20GAMES%202/OregonTrailv321.png

Resources • @jquerymobile • #jquerymobile

Questions? Can I integrate with Google or Bing Maps? What’s
coming in the 1.4 release? Server-side versus client-side integration? Can I integrate with RESTful Services?

Thank You! @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/codecamp-jqm

Getting Started with jQuery Mobile

Getting Started with jQuery Mobile

More Decks by Brad Broulik

Other Decks in Technology

Featured

Transcript