In Depth Look at jQuery Mobile

RALPH WHITBECK jQuery ইदই JQUERY ݽ߄ੌ AN IN-DEPTH LOOK AT

RALPH WHITBECK jQuery ইदই RALPH WHITBECK jQuery Board Member jQuery
Mobile Developer Relation Team Member Director of Professional Services Project Lead for jQuery Mobile Cookbook http://jquerymobilecookbook.com

RALPH WHITBECK jQuery ইदই

RALPH WHITBECK jQuery ইदই GRADED DEVICE SUPPORT See full device
list at http://jquerymobile.com/gbs

RALPH WHITBECK jQuery ইदই GETTING STARTED <!DOCTYPE html> <html>
<head> <meta name="viewport" content="width=device-‐width, initial-‐scale=1"> <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-‐1.2.0.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-‐1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-‐1.2.0.js"></script> </head> <body> </body> </html>

RALPH WHITBECK jQuery ইदই ANATOMY OF A PAGE <div data-‐role="page">
<div data-‐role="header"> <h1>My Title</h1> </div> <div data-‐role="content"> <p>Hello world</p> </div> <div data-‐role="footer"> <p>Footer</p> </div> </div>

RALPH WHITBECK jQuery ইदই MULTIPLE PAGES IN ONE FILE <div
id="page-‐1" data-‐role="page"> <div data-‐role= "header"><h1>Page 1</h1></div> <div data-‐role="content"> <a href="#page-‐2" data-‐role="button">Next Page</a> </div> </div> <div id="page-‐2" data-‐role="page"> <div data-‐role= "header"><h1>Page 2</h1></div> <div data-‐role="content"> <a href="#page-‐1" data-‐role="button">Previous Page</a> </div> </div>

RALPH WHITBECK jQuery ইदই ADDING COMPONENTS <div data-‐role="controlgroup"> <a
href="index.html" data-‐role="button">Yes</a> <a href="index.html" data-‐role="button">No</a> <a href="index.html" data-‐role="button">Maybe</a> </div>

RALPH WHITBECK jQuery ইदই ADDING COMPONENTS

RALPH WHITBECK jQuery ইदই http://jquerymobile.com/docs

RALPH WHITBECK jQuery ইदই STATE OF THE PROJECT

RALPH WHITBECK jQuery ইदই RELEASE MILESTONES • November 16, 2011
- 1.0.0 • January 26, 2012 - 1.0.1 • April 13, 2012 - 1.1.0 • July 12, 2012 - 1.1.1 • October 2, 2012 - 1.2.0

RALPH WHITBECK jQuery ইदই POPULARITY http://www.google.com/trends/explore#q=jQuery%20Mobile

RALPH WHITBECK jQuery ইदই POPULARITY BY REGION http://www.google.com/trends/explore#q=jQuery%20Mobile

RALPH WHITBECK jQuery ইदই THRIVING ECOSYSTEM

RALPH WHITBECK jQuery ইदই CODIQA

RALPH WHITBECK jQuery ইदই JQUERY MOBILE 1.2.0

RALPH WHITBECK jQuery ইदই JQUERY MOBILE 1.2.0 • New: Popup
Widget • New Auto dividers in Listview mode • Collapsable Listviews are now supported • A Download builder (Alpha)

RALPH WHITBECK jQuery ইदই ADDING A POPUP <a href="#simplepopup" data-‐rel="popup">Open
Popup</a> <div data-‐role="popup" id="simplepopup"> <p>This is a completely basic popup, no options set.</p> </div>

RALPH WHITBECK jQuery ইदই POPUP MENUS <a href="#menu" data-‐rel="popup" data-‐role="button">Menu</a>
<div data-‐role="popup" id="menu" data-‐theme="a"> <ul data-‐role="listview" data-‐theme="c" data-‐inset="true"> <li data-‐role="divider" data-‐theme="a">My Menu</li> <li>Unlinked</li> <li><a href="methods.html">Linked</a></li> <li> <a href="methods.html">With count <span class="ui-‐li-‐count">42</span> </a> </li> </ul> </div>

RALPH WHITBECK jQuery ইदই COLLAPSIBLE POPUP

RALPH WHITBECK jQuery ইदই POPUP FORM

RALPH WHITBECK jQuery ইदই POSITIONING • By Default: Popups Center
over object that triggered it • Add attribute data-‐position-‐to="window" • This centers the popup in the center of the window

RALPH WHITBECK jQuery ইदই OVERLAY STLYING • Overlay: Background of
the popup but overlays the page • Theme the overlay to a dark shade. With the default swatches we can use the a swatch • Set the overlay theme with data- attribute: data-overlay-theme • data-‐overlay-‐theme="a"

RALPH WHITBECK jQuery ইदই DIALOG • Combine both data attributes

RALPH WHITBECK jQuery ইदই ROADMAP • jQuery Mobile 1.3 •
Responsive Table • jQuery UI Convergence • New API/Demo Docs • Expected (end of year) • jQuery Mobile 1.4 • Scrolling Region Utility • New Tab Widget (Based on jQuery UI) • Expected (March/April 2013)

RALPH WHITBECK jQuery ইदই RESPONSIVE TABLES DEMO http://jquerymobile.com/branches/tables/docs/tables/index.html

RALPH WHITBECK jQuery ইदই THEMES

RALPH WHITBECK jQuery ইदই THEMING OVERVIEW • Uses CSS3 Properties
• Multiple Color “Swatches” • Sprited Icon Set • Default Theme come with 5 swatches a-e • If no swatch is speciﬁed by default: • a swatch for headers/footers • c swatch for content

RALPH WHITBECK jQuery ইदই MIXING SWATCHES <ul data-‐role="listview" data-‐theme="a">
<li><a href="#">Theme Inherit</a></li> <li data-‐theme="b"><a href="#">Theme b</a></li> <li data-‐theme="c"><a href="#">Theme c</a></li> <li data-‐theme="d"><a href="#">Theme d</a></li> <li data-‐theme="e"><a href="#">Theme e</a></li> </ul>

RALPH WHITBECK jQuery ইदই THEMEROLLER DEMO http://jquerymobile.com/themeroller

RALPH WHITBECK jQuery ইदই THIRD PARTY THEMES • jQuery Mobile
Blackberry 10 Theme • https://github.com/blackberry/jQueryMobile-BB10-Theme • iOS Theme • http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/ • Windows Phone 7.5 Metro Theme • http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html

RALPH WHITBECK jQuery ইदই JQMGALLERY.COM

RALPH WHITBECK jQuery ইदই PLUGIN INTEGRATION

RALPH WHITBECK jQuery ইदই THIRD PARTY PLUGINS Listed at: http://jquerymobile.com/resources/#Plugins

RALPH WHITBECK jQuery ইदই ADDING A PLUGIN IS EASY <link
href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-‐1.2.0.css" rel="stylesheet" type="text/css"> <link href="/css/plugin.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-‐1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-‐1.2.0.js"></ script> <script src="/js/plugin.js"></script>

RALPH WHITBECK jQuery ইदই CREATING WIDGETS

RALPH WHITBECK jQuery ইदই WIDGET FACTORY • All internal widget
use jQuery UI Widget Factory • Provides a template for code organization • Exposes all options as data attributes for consistency through library • More info: http://api.jqueryui.com/jQuery.widget/

RALPH WHITBECK jQuery ইदই AUTO INITIALIZATION • Users should add
CSS/JS and markup to page and “it just work” • To Auto Initialize: • Bind to pagecreate and create events • Call plugin on markup that matches markup convention • register the initSelector option with the data-role attribute to match against

RALPH WHITBECK jQuery ইदই AUTO INITIALIZATION //set the initSelection Option
options: { initSelector: ":jqmData(role='newplugin')" }, // Bind to pagecreate and create events // Using internal “listview” as our example $( document ).bind( "pagecreate create", function( e ) { $.mobile.listview.prototype.enhanceWithin( e.target ); });

RALPH WHITBECK jQuery ইदই NAMESPACING • Plugin should work with
namespaced attributes • Global namespace override that sets a namespace • test that plugin works with both data- attributes and data- namespace- attributes

RALPH WHITBECK jQuery ইदই NAMESPACING // To set a namespace
$(document).bind("mobileinit", function(){ $.mobile.ns = "mynamespace"; }); // this changes thing like // data-‐role now becomes data-‐mynamespace-‐role

RALPH WHITBECK jQuery ইदই THEME FRAMEWORK • Use internal plugins
as a guide on: • structural styles that don’t set background colors, font colors, etc. • This allows the theme to ﬂow through • Apply the stackable theme framework classes to your plugin • More info here http://jquerymobile.com/test/docs/api/themes.html • If swatch data- attribute is not set have widget inherit from the parent

RALPH WHITBECK jQuery ইदই SEMANTICS • Use HTML5 and better
semantics • This makes it easier for selecting and parsing • In some cases it’ll make it easier to replace existing markup with widget markup for degraded experiences

RALPH WHITBECK jQuery ইदই ACCESSIBILITY • Ensure widget incorporates accessibility
features like ARIA attributes • Test on screen readers like VoiceOver on iOS

RALPH WHITBECK jQuery ইदই UNIT TESTS • Have solid test
coverage • jQuery Mobile uses QUnit for their Test Suite • See jQuery Mobile’s tests for examples https://github.com/jquery/ jquery-mobile/tree/master/tests/unit

RALPH WHITBECK jQuery ইदই JQUERY MOBILE AND BACKBONE.JS

RALPH WHITBECK jQuery ইदই SOME TIPS • Disable jQuery Mobile’s
Page Navigation features, let backbone.js handle routing • When jQuery Mobile isn’t handling page navigation you’ll need to manually remove pages from the DOM • Complete Sample App https://github.com/ccoenraets/backbone- jquerymobile

RALPH WHITBECK jQuery ইदই PREPPING JQUERY MOBILE $(document).bind("mobileinit", function ()
{ // Disable jQuery Mobile page navigation $.mobile.ajaxEnabled = false; $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.pushStateEnabled = false; // Remove page from DOM when it's being replaced $(document).on('pagehide', 'div[data-‐role="page"]', function (event, ui) { $(event.currentTarget).remove(); }); });

RALPH WHITBECK jQuery ইदই JQUERY MOBILE AND CORDOVA

RALPH WHITBECK jQuery ইदই BUILD NATIVE APPS • Andriod •
Blackberry • iOS • Symbian • WebOS • Windows Phone • Windows 8 • Bada • Tizen

RALPH WHITBECK jQuery ইदই CROSS DOMAIN ISSUES • Document root
loads from ﬁle:// so loading assets from remote server is considered a cross-domain request • This can be a blocker in certain scenarios • Can set the jQuery Boolean variable $.support.cors to true • Additionally you may need to set the $.mobile.allowCrossDomainPages = true; in the mobileinit event • Look into PhoneGaps Whitelist feature to provide a list of URL’s allowed • Doesn’t work on all devices so look to PhoneGaps documentation

RALPH WHITBECK jQuery ইदই SOME TIPS • Use local copies
of jQuery Mobile with Cordova • Recommended that you disable PushState feature on installed apps • Avoid using underscores (_) in ﬁles and folders

RALPH WHITBECK jQuery ইदই THANK YOU • Reach me at
[email protected] • Twitter at @RedWolves • Special Thanks to Andy Matthews for his permission for code/screenshots from his tutorial on Nettuts

In Depth Look at jQuery Mobile

In Depth Look at jQuery Mobile

More Decks by Ralph Whitbeck

Other Decks in Technology

Featured

Transcript