jQuery Mobile Example

jQuery Mobile Page

Basic Mobile Web Page
Multiple Pages
Dialogue Box

Example Explanation

jQuery Mobile Transition

Fade In and Out Effect
Page Flip Effect
Flow Effect
Popup Effect
Swipe Effect
Swipe Fade Out Effect
Swipe Up Effect
Swipe Down Effect
Page Flip Effect
No Transition Effect
Reverse Effect

Example Explanation

jQuery Mobile Button

Create Button
Inline Buttons
Grouped Buttons
Back Button
Buttons with and without Rounded Corners
Small and Normal Size Buttons
Buttons with and without Shadows

Example Explanation

jQuery Mobile Button Icons

Add Icon to Button
Position Icon
Display Icon Only

Example Explanation

jQuery Mobile Toolbar

Create Header and Footer
Add Button in Header
Add a Button to the Left of the Header
Add a Button to the Right of the Header
Footer with Buttons
Footer with Centered Buttons
Footer with Group Buttons
Footer with Horizontal Group Buttons
Inline Position - The Header and Footer Are Inline with the Page Content
Fixed Position - The Header and Footer Will Remain at the Top and Bottom of the Page
Fullscreen Position - The Page and Footer are Located at the Top and Bottom but Still on the Page Content

Example Explanation

jQuery Mobile Navigation Bar

Create a Navigation Bar
Navigation Bar in the Content
Navigation Bar in the Footer
Add Selected Appearance (Pressed) to Buttons in the Navigation Bar
Add Selected Appearance (Pressed)
Position Icon in the Navigation Bar
Demonstrate Ten Buttons in the Navigation Bar

Example Explanation

jQuery Mobile Collapsible

Create a Content Collapsible Block
Expand Content When the Page Loads
Nested Collapsible Blocks
Collapsible Collection (Accordion)
Remove the Rounded Corners from the Collapsible Block
Make the Collapsible Block Smaller
Change the Icon of the Collapsible Block
Collapsible List
Collapsible Form

Example Explanation

jQuery Mobile Grid

Two-Column Layout
Three-Column Layout
Four-Column Layout
Five-Column Layout
Custom Grid
Multiple Rows in a Column

Example Explanation

jQuery Mobile List

Create a List View
Rounded List View
List Separator
Automatic Separator
Create a Search Filter
Change the Text in the Search Box
Create a Read-Only List
Add a Thumbnail to List Items
Use Standard HTML to Fill an Information List
Add an Icon to List Items
Create a List with Separator Button
Enhance the Functionality of List Items
Create a Counter Bubble
Change the Default Link Icon of List Items
Collapsible List
Create a Calendar

Example Explanation

jQuery Mobile Form

Text Input
Text Box
Search Input
Radio Button
Checkbox
Horizontal Combination of Radio Buttons and Checkboxes
Field Container with Radio Buttons and Checkboxes
Preselected Radio Buttons and Checkboxes
Create a Selection Menu
Create a Selection Menu with Separator (optgroup)
Custom Selection Menu
Select Multiple Options in the Selection Menu
Combination Selection Menu
Horizontal Combination Selection Menu
Preselect an Option
Collapsible Form
Create a Slider Control
Highlight the Track Up to the Slider Value
Range Slider (Dual)
Create a Toggle Switch
Preselect a Toggle Switch

Example Explanation

jQuery Mobile Theme

Theme "a"
Theme "b"
Theme "c"
Theme "d"
Theme "e"
Themed Header, Content, and Footer
Themed Dialog
Themed Buttons
Themed Icons
Themed Buttons in Header and Footer
Themed Navigation Bar
Themed Collapsible Button and Content
Themed List
Themed Toggle Button
Themed Collapsible List
Themed Form
Themed Collapsible Form
Customized Theme

Example Explanation

jQuery Mobile Event

Tap Event
Taphold Event
Swipe Event
Swipeleft Event
Swiperight Event
Scrollstart Event
Scrollstop Event
Orientationchange Event - Prompt Direction
Orientationchange Event - Set different styles for horizontal and vertical directions
Page Initialization Event
Page Load Event
Page Transition Event

Example Explanation