Learning JQuery Mobile The Easy Way

Create a project folder named my mobile web site with an includes folder, then copy jQuery and jQuery Mobile into includes and add a services folder for AJAX-loaded HTML files.

Export graphics for mobile web by using slice tools to export individual slices from a layered Photoshop file as jpeg files via save for web and devices.

Explore the jQuery mobile setup by using the official docs and theme roller, then copy the HTML5 doctype and mobile page structure, set the viewport, and link libraries.

Learn to build a multi-page mobile web structure in jquery mobile, with an outer div data roll of page, containing header, content, and footer, and navigate between pages via links.

Apply jQuery mobile themes by adding data-theme attributes to page elements, mix swatches A–E for header, content, and footer, and review the theming framework in the documentation.

Design a custom theme for the J.Crew mobile site using theme roller, adjusting swatches, global settings, and icons, then download and import the theme to update your project.

Apply a custom jQuery mobile theme by linking the CSS file from the themes folder, adjust data-theme attributes, and preview swatches to customize the mobile site.

Add the page content by importing five mobile pages and building navigation with anchor tags. Configure the contact us as a dialog with data-role, data-icon, data-rel, and data-transition.

Create a vertical button group using a data-role 'controlgroup' in jQuery mobile and link to service pages that load via Ajax, preserving header and footer for a seamless single-page experience.

Create a custom javascript file to extend jQuery Mobile by injecting data-rel='dialog' into country list item links, load it in, and enable dialog contact interactions.

Create a cssa file in includes, link it after structure and theme styles to override design, inspect dom to target ui page active, and hide header on the home page.

Restyle home page buttons with CSSA rules, preserving the roller and footer. Apply semi-transparent white buttons with hover, adjust contact button margins, and top padding to reveal the logo.

Create CSSA rules to target the swatch, adjust button width, and color the header back button. Override global styles to set the body background and left-align h1 titles.

Define css rules for content formatting, including h2/h3 margins and color, and style the services chart with float, borders, and drop shadows. Apply intro text and ajax-loaded content styling.

Explore how to transform your HTML and JavaScript projects into native apps using cross-platform tools like PhoneGap, Sencha, and Accelerator, and extend your mobile web sites to real devices.