Learn jQuery Mobile from Scratch

Learn to structure a jQuery mobile page by defining a data-role page with a header, content, and a footer, and place the main content in a ui-content area.

discover the default jQuery mobile theme and learn to override it with a custom stylesheet, using developer tools for live previews and targeted css changes.

Explore slide-out navigation in jQuery Mobile by adding icons, configuring panels (left, right, overlay, reveal, push), and implementing navigation outside page elements.

Learn to add a bars icon in the header by copying the icons directory into your project, then using the ui-icon class with no text and linking the icons CSS.

Learn how to create and style buttons in jQuery Mobile, including internal linking, corner radius, shadows, and icons, and use buttons as event triggers for form-like interactions.

Learn to create internal links in jQuery mobile by linking to element IDs with anchors, and open external links in a new tab using target _blank.

Enhance listviews in jQuery Mobile by applying data-role listview, dividers, icons, and badges to create a polished inbox-style folder list and side navigation for emails.

Create an advanced inbox listview in jQuery mobile by building a page with header and content, adding a divider, list items, and message links with sender, subject, and preview.

Explore dynamic jQuery mobile listviews by building an autocomplete search that filters items, uses a form and data-role listview, and adds collapsible nested lists.

Learn to style jQuery Mobile listviews by removing padding and margins on collapsible items and applying targeted CSS to ul.listview li and a elements for typography and alignment.

Learn to add thumbnail images to list views in jQuery Mobile, resizing to 80 by 80 and styling margins for a cleaner inbox layout.

Learn how to place multiple links inside a jQuery mobile list view item by removing the a element wrapper, freeing the item for separate links, demonstrated with the inbox page.

Learn to create buttons in jQuery mobile by styling an a element as a ui-button. Customize color, size, and hover, and explore inline options and icons.

Learn to add icons to buttons in jQuery Mobile and control icon placement using button icon classes and position options, illustrated with a compose button example.

Learn to group and connect buttons in jQuery mobile by wrapping them in a control group with data-role='controlgroup' and data-type='horizontal', with options for vertical and mini-sized layouts.

Build a basic form on a jQuery mobile compose page, including an email input with a placeholder and a message textarea, with a save button styled by jQuery mobile.

Learn to build a jQuery mobile pizza order page using a size range slider, toppings checkboxes, delivery radio groups, a delivery address textarea, and a submit button.

Learn to implement select lists in jQuery Mobile with native and custom menus, including single and multiple selections, and display chosen options for scalable toppings.

Learn how to submit form data with Ajax using jQuery to a PHP back end without page refresh, including handling events, serializing forms, and returning responses for dynamic user experiences.

Turn checkboxes into flip switches in jQuery Mobile with a data role, set default states with checked, and customize on/off labels via data on text and data off text.

Style and theme form elements in jQuery Mobile by customizing inputs, textareas, and sliders with color, border, and font weight and font size, using important rules to ensure overrides.

Learn to structure pages in jQuery Mobile with content layouts that separate headings from content using ui bar and ui body wrappers, and covers separate, combined, and attached heading layouts.

Learn to build multi-column layouts in jQuery Mobile using grid wrappers and ui-grid classes, create two-, three-, and multi-row grids, and repeat content for multiple rows.

Create a collapsible, multi-column layout by adding a div with data-role of collapsable and data-many true, then place a multi-column view inside and toggle it open or closed.

Learn to implement a tabbed layout by wrapping a data-role tabs container, building a nav bar with tab links, and creating content panels linked by IDs, with optional tab list.

Learn to build responsive tables with jQuery Mobile using the table reflow method. Create a sample table with id, name, and email, and apply a custom breakpoint with CSS.

Explore swipe events in jQuery Mobile by handling swipe right to open a panel and swipe left to demonstrate direction; implement event targets, callbacks, and native feel.

Learn how tapping and tap hold gestures trigger events on inbox items, using document.on with tap and tap hold to run handlers like alerting and delete confirmation.

Set the target to the window on orientation change and use the callback event object to detect portrait or landscape mode, then log the orientation.

Learn how to manage jQuery mobile page transitions using key events like page before load, before show, and page change to customize animations and access page data.

Design a four-page social network mockup using jQuery Mobile, featuring an activity feed, profile with collapse tables and tabs, a messages list view, and a settings form.

Create the final project profile and messages sections in a jQuery Mobile app, with a header, footer, avatar header, tabbed info and activity, and a swipeable messages list.

Develop swipe interactions in a jQuery mobile inbox, including swipe left for delete and swipe right for actions, and build a settings page with serialized form data.