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"
• Multiple Color “Swatches” • Sprited Icon Set • Default Theme come with 5 swatches a-e • If no swatch is specified by default: • a swatch for headers/footers • c swatch for content
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/
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
namespaced attributes • Global namespace override that sets a namespace • test that plugin works with both data- attributes and data- namespace- attributes
as a guide on: • structural styles that don’t set background colors, font colors, etc. • This allows the theme to flow 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
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
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
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
loads from file:// 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