Search within TutorialsPark

jQuery Mobile : Tables


Learn how to Create Responsive tables and Tables with Column Toggle


jQuery Mobile Button

Table: jQuery Mobile - Button

Class Values Description
ui-corner-all true | false When the user Taps on the Element
When the user taps and holds on to the element for approx 1 Sec.
swipe Swipe either in vertical direction for 20 or less pixels , or horizontally for 30 or more pixels
swipeleft Swipe in left direction for 30 or more pixels
swiperight Swipe in right direction for 30 or more pixels

jQuery Mobile Button

Table: jQuery Mobile - Button

Class Values Description
data-corners true | false To set the corners of button
data-icon Icon List The Icon to be used with the button
data-iconpos left | right | top | bottom To set the position of icon
data-inline true | false To set whether the button is inline or not
data-mini true | false To create a minified version of button
data-shadow true | false To set the shadow of the button
data-theme swatch characters (a-z) Theme of the button

jQuery Mobile Checkbox

Table: jQuery Mobile - Checkbox

Class Values Description
data-mini true | false To create a minified version
data-role none When set to none, removes auto-enhancement
data-theme swatch char(a-z) Theme of the Checkbox

jQuery Mobile : Collapsibles

Table: jQuery Mobile - Collapsible

Class Values Description
data-collapsed true | false Set the collapse set of the accordion
data-collapse-cue-text string Text for the audible feedback for screen reader in collapse state
data-collapsed-icon Icon Reference Icon to be used for the collapsible state
data-content-theme swatch char(a-z) Theme of the content
data-expand-cue-text string Text to provide audible feedback for screen reader, expand state
data-expanded-icon Icon Reference Icon to be used within Expanded state.
data-iconpos left | right | top | bottom Position of the icon in the Collapsible
data-inset true | false To set whether inset or not.
data-mini true | false A minified version of the collapsible
data-theme swatch char Theme of collapsible

jQuery Mobile Controlgroup

Table: jQuery Mobile - Controlgroup

Class Values Description
data-exclude-invisible true | false To define whether invisible children are excluded for assigning rounded corners
data-mini true | false To create a minified version of the controlgroup
data-theme swatch char(a-z) To set the theme of the control group
data-type horizontal | vertical Set the alignment the control group.

jQuery Mobile : Dialog

Table: jQuery Mobile - Dialog

Class Values Description
data-close-btn left | right | none position of the close button
data-close-btn-text string Text on the Dialog close button
data-corners true | false To Set the corners of dialog modal
data-dom-cache true | false To set the DOM cache mode for Dialog Pages
data-overlay-theme swatch char(a-z) To set the theme of the overlay when dialog is open.
data-theme swatch char(a-z) Theme of the Dialog page
data-title string To set the title of the Dialog Box

jQuery Mobile : Enhancement

Table: jQuery Mobile - Enhancement

Class Values Description
data-enhance true | false If set to false, the automatic styling is disabled
data-ajax true | false To load the pages via Ajax or not

jQuery Mobile : Flip Toggle Switch

Table: jQuery Mobile - Flip toggle Switch

Class Values Description
data-mini true | false To create a minified version of flip toggle
data-role none When set to none, prevents auto enhancement.
data-theme swatch char(a-z) Theme of form element
data-track-theme swatch char(a-z) Theme of the flip switch track

jQuery Mobile : Link

Table: jQuery Mobile - Link

Class Values Description
data-ajax true | false To get data via ajax or not
data-direction reverse To set the reverse transition animation, only for dialog
data-dom-cache true | false To set the DOM cache mode of the link
data-prefetch true | false To set whether to prefetch page in the DOM
data-rel back | dialog | external | popup back - To navigate one step back in history
dialog - To open a link as a dialog, no record in history
external - To link to external document
popup - To open the popop
data-transition fade |
flip |
flow |
pop |
slidedown |
slidefade |
slideup |
turn |
none
Transition of the animation
data-position-to origin |
window
origin - To center the popup over the link
window - To center the popup in a window

jQuery Mobile : Listview

Table: jQuery Mobile - Listview

Class Values Description
data-autodividers true | false To create autodividers
data-count-theme swatch char (a-z) To set the theme of the counter
data-divider-theme swatch char(a-z) To set the theme of the Divider
data-filter true | false To set a data filter for list elements
data-filter-placeholder string To create a Placeholder using a string.
data-filter-theme swatch letter (a-z) Theme of the filter
data-header-theme swatch letter (a-z) Theme of the header
data-icon Icon Reference Icon for the list
data-inset true | false To style the list as inset, i.e with rounded corners
data-split-icon Icon Reference The icon for the split section
data-split-theme swatch char(a-z) Default theme is b
data-theme swatch char(a-z) Theme color of the list

jQuery Mobile : Listview Item

Table: jQuery Mobile - Listview Item

Class Values Description
data-filtertext string To set the filter text instead of the text entered
data-icon Icon Reference Icon of the list view
data-role list-divider The create a divider
data-theme swatch char(a-z) Theme of the list

jQuery Mobile Global Classes

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-filtertext When the user Taps on the Element
data-icon When the user taps and holds on to the element for approx 1 Sec.
data-role Swipe either in vertical direction for 20 or less pixels , or horizontally for 30 or more pixels
data-theme Swipe in left direction for 30 or more pixels

jQuery Mobile : Page

Table: jQuery Mobile - Page

Class Values Description
data-dom-cache true | false To create a DOM cache, to cache webpages
data-overlay-theme swatch char(a-z) Theme of the overlay when the Page is open as dialog
data-theme swatch char(a-z) Theme of the page
data-title string Title of the page
data-url URL Value for updating the URL

jQuery Mobile : Popup

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Description
data-corners true | false To create the corners of Popup
data-dismissible true | false If set to false, popup cannot be dismissed by clicking outside the popup
data-history true | false When set to true, history of popup is created.
data-overlay-theme swatch char(a-z)
Default "null"
Theme of overlay when popup is open, default is transparent.
data-position-to origin |
window |
selector
origin Pop up is centered over the link
window Popup in a browser window
selector Popup over the first element returned by the selector
data-show true | false To create a shadow of popup
data-theme swatch char(a-z) By Default inherited theme, if set to "none" creates transparent popup.
data-tolerance 30,15,30, 15 Set Distance from the edges of window(top, right, bottom, left)
data-transition none| transition Transition style for opening and closing popup

jQuery Mobile Global Classes

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-mini true | false To create a minified version of Radio Button
data-role none When set to none, prevents auto enhancement.
data-theme swatch char(a-z) Theme of the radio button

jQuery Mobile Global Classes

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-divider-theme swatch char(a-z) Theme of the divider
data-icon Icon Reference Icon for select Menu
data-iconpos left |
false|
top |
bottom |
notext |
Position of the Icon in Select Menu
data-inline true | false To specify if the select menu is inline.
data-mini true | false To create a minified version of the selectmenu
data-native-menu true | false When set to false, an enhanced menu is created.
data-overlay-theme swatch char(a-z) Theme of the overlay for non native select
data-placeholder true | false To set a placeholder for non native select.
data-role none To prevent auto enhancement of native control
data-theme swatch char(a-z) Theme of the form element

jQuery Mobile Slider

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-highlight true | false To highlight the slider track
data-mini true | false To create a minified slider
data-role none When set to none, prevents auto-enhancement
data-theme swatch char(a-z) Theme of the slider
data-track-theme swatch char(a-z) Theme of the data track of the slider

jQuery Mobile Textinput

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-clear-btn true | false To add a clear button
data-clear-btn-text string Text of the close button
data-mini true | false To create a minified version of Text input
data-role none To prevent auto-enhancement when set to none
data-theme swatch char(a-z) Theme of the Textinput

jQuery Mobile Global Classes

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-add-back-btn true | false Add backbutton when set to true, for header only
data-back-btn-text string Text for the back button
data-back-btn-theme swatch char(a-z) Theme for the header button
data-id string Unique ID of the persistent footer
data-position fixed To create a fixed toolbar
data-theme swatch char(a-z) Theme of the toolbar

jQuery Mobile Global Classes

Table: jQuery Mobile - jQuery Mobile Layout Grid

Class Values Description
data-disable-page-zoom true | false To set the scaleablity of the fixed toolbar
data-fullscreen true | false To set toolbar over the page content
data-tap-toggle true | false Ability to toggle the visibility of the toolbar.
data-transition slide |
fade |
none
Transition style to show or hide toolbar
data-update-page-padding true | false
data-visible-on-page-show true |
false
Visibilty of toolbar when parent page is displayed