jQuery Mobile Example
jQuery Mobile page
A basic mobile web page
Multiple pages
Dialog box
Explanation
jQuery Mobile page switching
Fade in effect
Flip effect from back to front
Flow effect
Popup effect
Sliding effect
Sliding from right to left and fade in effect
Sliding effect from bottom to top
Sliding effect from top to bottom
Page turning effect
No switching effect
Inversion effect
Example explanation
jQuery Mobile button
Create button
Inline button
Combo button
Back button
Button with or without rounded corners
Small or regular size button
Button with or without shadow
Explanation of examples
jQuery Mobile button icon
Add icon to button
Position icon
Only Display icon
Explanation of examples
jQuery Mobile toolbar
Create header bar and tail bar
Add a button to the header bar
Add a button to the left of the header bar
Add a button to the right of the header bar
Tail bar with buttons
Tail bar with center-aligned buttons
Tail bar with combo button
Tail bar with horizontal combo button
Inline positioning - the header bar and footer bar are inline with the page content
Fixed positioning - the header bar and footer bar are fixed At the top and bottom of the page
Fullscreen positioning - the header bar and footer bar are fixed at the top and bottom of the page, but will cover the page content
Explanation of examples
jQuery Mobile Navigation Bar
Create Navigation Bar
Navigation Bar in Content
Navigation Bar in Footer
Add button in navigation bar Selected (pressed) appearance
Continuously adding selected (pressed) appearance
Positioning icons in the navigation bar
Demonstration of 10 buttons in the navigation bar
Explanation of examples
jQuery Mobile Collapsible Blocks
Create collapsible content blocks
Expand content when page loads
Nestedable Foldable block
Collapsible collection
Cancel the rounded corners on the collapsible block
Make the collapsible block smaller
Change the icon of the collapsible block
Collapsible list
Collapsible form
Explanation of examples
##jQuery Mobile Grid
Two column layoutThree column layout
Four-column layout
Five-column layout
Customized grid
Multiple rows within a column
Explanation of examples
jQuery Mobile list
Create list viewList view with rounded corners
List separation
Auto separation
Create search filter
Change the text in the search box
Create a read-only list
Add thumbnails for list items
Add HTML elements to populate list items with information
Add icons to list items
Create a list with split buttons
Let the list Items are more functional
Create counting bubbles
Create default link icons for list items
Collapsible lists
Create calendar
Example explanation
jQuery Mobile Form
Text input box
Text input field
Search input box
Radio button
Checkbox
Horizontal combination of radio buttons and checkboxes
Field container with radio buttons and checkboxes
Preselect radio buttons/checkboxes
Create selection menu
Create with separator (optgroup) selection menu
Custom selection menu
Select multiple options in the selection menu
Combined selection menu
Horizontal combination selection menu
Preselected options
Collapsible form
Create a slider control
Highlight the value of the slider
Create a toggle switch
Preselect the toggle switch
Explanation of examples
jQuery Mobile Theme
Theme"a"
Theme"b"
Theme header, content and trailer
Theme dialog
Theme button
Theme icon
Head and tail theme buttons
Theme navigation bar
Theme collapsible button and content
Theme list
Theme split button
Theme collapsible list
Theme form
Theme collapsible form
Custom theme
Explanation of examples
jQuery Mobile touch event
Click (Tap) event
Click and hold (Taphold) event
Swipe (Swipe) event
Swipe left (Swipeleft) event
Swipe right (Swiperight) event
Scrollstart event
Scrollstop event
Orientationchange event-prompt direction
Orientationchange event-set different styles for portrait and landscape
Explanation with examples
