May 21, 2021 jQuery Mobile
jQuery Mobile page
A basic mobile web page
Multiple pages
Dialog box
jQuery Mobile page switching
Fade-in effect
Flip the effect forward from behind
The flow effect
Pop-up effect
Slide effect
Swipe right to left and fade in
Slide the effect from bottom to top
Top-to-slide effect
Page-turning effect
There is no switching effect
Reverse the effect
jQuery Mobile button
Create a button
Inline button
Combine the buttons
Back button
Buttons with or without fillets
Buttons of small or regular size
Buttons with or without shadows
jQuery Mobile button icon
Add an icon to the button
Position the icon
Only icons are displayed
jQuery Mobile toolbar
Create a head bar and a tail bar
Add a button to the headbar
Add a button to the left of the headbar
Add a button to the right of the headbar
The tail bar with buttons
Tailbar with center alignment button
The tail bar with the combined button
The tailbar with the horizontal combination button
Inline Positioning - The head and tail bars are inline with the page content
Fixed Positioning - The head and tail bars are pinned to the top and bottom of the page
Fullscreen Positioning - The head and tail bars are pinned to the top and bottom of the page, but obscure the contents of the page
jQuery Mobile navigation bar
Create a navigation bar
The navigation bar in the content
The navigation bar in the tail
Add a selected (pressed) look to the button in the navigation bar
Continue to add selected (pressed) skins
Position the icon in the navigation bar
A demonstration of the 10 buttons in the navigation bar
jQuery Mobile collapsible blocks
Create a collapsible block of content
Expand the content when the page loads
Nested collapsible blocks
The collapsible collection
Cancel the fillets on the collapsible block
Make the collapsible block smaller
Change the icon of the collapsible block
The list is collapsible
The form is collapsible
jQuery Mobile Grid
Two-column layout
Three-column layout
Four-column layout
Five-column layout
Custom grid
Multiple rows in the column
jQuery Mobile list
Create a list view
A list view with fillets
The list is separated
Automatic separation
Create a search filter
Change the text in the search box
Create a read-only list
Add thumbnails to list items
Add HTML elements to populate list items with information
Add icons to list items
Create a list with split buttons
Make list items more functional
Create a count bubble
Create a default link icon for list items
The list is collapsible
Create a calendar
jQuery Mobile form
The text input box
The text input field
Search the input box
The option button
Check box
Combine the option buttons and check boxes horizontally
Field container with a turn button and check box
Preselected single button/check box
Create a selection menu
Create a selection menu with a split (optgroup).
Custom selection menu
Select multiple options in the selection menu
Combine the selection menu
Select the menu horizontally
Preselect options
The form is collapsible
Create a slider control
Highlight the value of the slider
Create a toss switch
Pre-select toss the switch
jQuery Mobile theme
Theme "a"
Subject "b"
Subject "c"
Theme "d"
Theme "e"
Theme head, content, and tail
The theme dialog box
The theme button
The theme icon
Theme buttons for the head and tail
Theme navigation bar
Theme collapsible buttons and content
The list of topics
The theme split button
The list of topics can be collapsed
The subject form
The theme collapses the form
Customize the theme
jQuery Mobile touch event
Click on the Tap event
Click on the Taphold event
Swipe event
Swipe left for the swipeleft event
Swipe right for the Swiperight event
Scrollstart event
Scrollstop event
Orientationchange event - prompt direction
Orientationchange event - sets different styles for portrait and landscape