Introducing the jQuery Mobile Metro Theme

The post introduces the jQuery Mobile Metro theme and shows how the same jQM markup can produce an iOS-style UI or a Metro UI by changing stylesheets. It also describes detecting Windows Phone 7 with the user agent string and switching themes for that device.

Reading notes

#

• Microsoft Open Technologies backed jQuery Mobile Metro as part of its work on open source, standards, and interoperability.
• jQuery Mobile uses HTML annotated with data-role attributes, while its JavaScript adds the extra structure needed for styling and transitions.
• The framework can render an iOS-like interface and supports built-in mobile controls and AJAX page loading.
• Switching to the Metro look only requires referencing the Metro CSS theme and setting the page theme to dark.
• The SandwichFlow example uses the same structure to present sandwich recipes and list dividers that resemble a jump list in the Metro theme.
• The page can choose between themes by checking whether the browser string contains Windows Phone OS 7.5.
• Both themes can be included at once, with Metro loaded as an alternate stylesheet and activated by JavaScript when needed.
• A T4 template is used to generate individual recipe HTML files from XML data and add the files to the Visual Studio project.
• On WP7, a jQuery handler removes back buttons because the hardware back button is expected on that platform.
• The conclusion says jQM is simple and useful for quickly building mobile sites, but its dynamic behavior and some Metro controls still fall short of the native experience.