jQuery Mobile Examples
jQuery Mobile Pages
A basic mobile web page
Multiple pages
Dialog box
jQuery Mobile Transitions
Fade effect
Flip effect
Flow effect
Pop effect
Slide effect
Slidefade effect
Slideup effect
Slidedown effect
Turn effect
No transition effect
Reversed effect
jQuery Mobile Buttons
Create a button
Inline buttons
Grouped buttons
Back buttons
Change the button color
Buttons with or without rounded corners
Small or regular size buttons
Buttons with or without shadows
jQuery Mobile Button Icons
Add icons to buttons
Add more icons (icons introduced in version 1.4)
Positioning icons
Display only the icon
Remove the circle (disc)
Change the icon color
jQuery Mobile Popups
Create a basic popup
Add padding and margin to the popup
Close the popup with a right close button
Close the popup with a left close button
Undismissible Popup
Positioning popups
Transitioning popups
Popup Arrows
Popup dialogs
Popup photos
jQuery Mobile Toolbars
Create a header and a footer
Add buttons in header
Add a button to the left side in the header
Add a button to the right side in the header
Footer with buttons
Footer with center aligned buttons
Footer with horizontally grouped buttons
Inline position - header and footer inline with page content
Fixed position - header and footer will remain positioned at top and bottom of the page
Fullscreen position - header and footer remains positioned at the top and bottom, but also over the page content
jQuery Mobile Navigation Bars
Create a navigation bar
Icons in navigation buttons
Navigation bars in content
Navigation bars in footer
Add the selected (pressed down) look for buttons in navigation bars
Add the selected (pressed down) look persistently
Positioning icons: top alignment
Positioning icons: right alignment
Positioning icons: bottom alignment
Positioning icons: left alignment
A demonstration of 10 buttons in a navigation bar
jQuery Mobile Panels
Create a basic panel
A panel with a close button
Change the panel display
Right position a panel
Fixed panel position
jQuery Mobile Collapsibles
Create a collapsible block of content
Expand the content when the page loads
Nested collapsible blocks
Collapsible sets (accordion)
Remove rounded corners on collapsibles
Make collapsibles smaller
Change the icon of collapsibles
Change the icon position of collapsibles
jQuery Mobile Tables
Create a reflow table
Create a column toggle table
Change the toggle table button text
Add shadows to the table
Add a bottom border to all table rows
Add a background-color to all table rows
jQuery Mobile Grids
Two-column layout
Three-column layout
Four-column layout
Five-column layout
Customize grids
Multiple rows inside columns
jQuery Mobile Lists
Create list views
List views with rounded corners
List dividers
Autodividers
Create read-only lists
Insert panels to the list items
Change default link icon for list items
Add icons to list items
Add thumbnails to list items
Add HTML elements to fill the list items with information
Create lists with split buttons
Make the list items more functional
Create count bubbles
Popup lists
Collapsible lists
Collapsible popup lists
Full width collapsible lists
Create a calendar
jQuery Mobile Filters
Create a search field for lists
Change the text inside the search field
Custom filter
Filter collapsible lists
Filter tables
Filter a <div> element
jQuery Mobile Forms
Text inputs
Adding an icon in input buttons
Adding a "clear" button in inputs
Text area
Search input
Radio buttons
Checkboxes
Group radio buttons and checkboxes horizontally
Field containers with radio buttons and checkboxes
Pre-select radio button/checkbox
Place the form inside a popup
Prevent jQuery Mobile to automatically style tappable elements
Create a select menu
Create select menus with dividers (optgroup)
Custom select menus
Select multiple options in the select menu
Group selection menus
Group selection menus horizontally
Minify selection menus
Pre-select an option
Popup selections
Collapsible forms
Change the default select icon
Change the icon position
Create a slider control
Show the value on the slider button
Make the value popup on the screen as the user slide
Highlight the track up to the slider value
Range slider (dual)
Create a flip toggle switch
Change the text on the flip switch
Pre-select a flip switch
Style the flip switch
jQuery Mobile Themes
Theme "a"
Theme "b"
Theming header and footer
Theming dialogs
Theming buttons
Theming icons
Theming popups
Theming buttons in header and footer
Theming navigation bars
Theming panels
Theming collapsible button and content
Theming lists
Theming split buttons
Theming collapsible lists
Theming forms
Theming collapsible forms
Customize themes
jQuery Mobile Events
Tap event
Taphold event
Swipe event
Swipeleft event
Swiperight event
Scrollstart event
Scrollstop event
Orientationchange event - Alert orientation
Orientationchange event - Set different styles for portrait and landscape
Page initialization events
Page load events
Page transition events
