jQuery Mobile Examples
jQuery Mobile Pages
A basic mobile web page
Multiple pages
Dialogs
jQuery Mobile Page Transitions
Fade effect
Flip from back to front effect
Flow effect
Pop effect
Slide effect
Slide from right to left and fade in effect
Slide from bottom to top effect
Slide from top to bottom effect
Turn effect
No transition effect
Reverse effect
jQuery Mobile Buttons
Creating buttons
Inline buttons
Grouped buttons
Back button
Buttons with or without rounded corners
Small or regular sized buttons
Buttons with or without shadows
jQuery Mobile Button Icons
Adding icons to buttons
Positioning icons
Displaying icons only
jQuery Mobile Toolbars
Creating header and footer bars
Adding buttons to header bar
Adding button on left side of header bar
Adding button on right side of header bar
Footer bar with buttons
Footer bar with centered buttons
Footer bar with grouped buttons
Footer bar with horizontal grouped buttons
Inline positioning - Header and footer bars are inline with page content
Fixed positioning - Header and footer bars fixed at top and bottom of page
Fullscreen positioning - Header and footer bars fixed at top and bottom of page, but cover page content
jQuery Mobile Navbars
Creating a navbar
Navbar in content
Navbar in footer
Adding selected (pressed) appearance to buttons in navbar
Persistent selected (pressed) appearance
Positioning icons in navbar
Demonstration of 10 buttons in navbar
jQuery Mobile Collapsibles
Creating collapsible content blocks
Expand content when page loads
Nested collapsibles
Collapsible sets
Removing rounded corners on collapsibles
Making collapsibles smaller
Changing collapsible icons
Collapsible list
Collapsible form
jQuery Mobile Grids
Two-column layout
Three-column layout
Four-column layout
Five-column layout
Custom grid
Multiple rows within columns
jQuery Mobile Lists
Creating list views
List views with rounded corners
List dividers
Automatic dividers
Creating search filter
Changing text in search box
Creating read-only lists
Adding thumbnails to list items
Adding HTML elements to fill list items with information
Adding icons to list items
Creating lists with split buttons
Making list items more functional
Creating count bubbles
Creating default link icons for list items
Collapsible list
Creating a calendar
jQuery Mobile Forms
Text input box
Text input area
Search input box
Radio buttons
Checkboxes
Horizontal grouping of radio buttons and checkboxes
Field container with radio buttons and checkboxes
Pre-selected radio buttons/checkboxes
Creating select menus
Creating select menus with dividers (optgroup)
Custom select menus
Selecting multiple options in select menu
Grouped select menus
Horizontal grouped select menus
Pre-selected options
Collapsible form
Creating slider controls
Highlighting the value of the slider
Creating flip toggle switches
Pre-selected flip toggle switch
jQuery Mobile Themes
Theme "a"
Theme "b"
Themed header, content and footer
Themed dialogs
Themed buttons
Themed icons
Themed buttons in header and footer
Themed navbar
Themed collapsible buttons and content
Themed lists
Themed split buttons
Themed collapsible lists
Themed forms
Themed collapsible forms
Custom themes
jQuery Mobile Touch Events
Tap event
Taphold event
Swipe event
Swipeleft event
Swiperight event
Scrollstart event
Scrollstop event
Orientationchange event - Display orientation
Orientationchange event - Set different styles for portrait and landscape
Other extensions