jQuery Mobile – Data Attributes


jQuery Mobile – Data Attributes


”;


Button

It specifies a clickable button that includes content like text or images using the class ui-btn. It is deprecated in version 1.4. Use the ui-btn attribute instead of using data-role = “button” attribute.

Following table lists the button elements used with data attribute.

Sr.No. Data-attribute & Description Value
1

data-corners

It defines whether the button should contain rounded corners or not.

true | false
2

data-icon

It defines the icon of the button.

Default is no icon
3

data-iconpos

It defines the position of the icon.

left | right | top | bottom
4

data-iconshadow

It defines whether the icon of the button should contain shadow or not.

true | false
5

data-inline

It defines whether the button should be inline or not.

true | false
6

data-mini

It defines whether the button should display in smaller size or regular size.

true | false
7

data-shadow

It defines whether the button should contain shadow or not.

true | false
8

data-theme

It displays the theme color for the button.

letter (a-z)

Checkbox

Following table lists the checkbox elements used with type = “checkbox”.

Sr.No. Data-attribute & Description Value
1

data-mini

It defines whether the checkbox should display in smaller size or regular size.

true | false
2

data-role

It stops styling of checkboxes as buttons.

none
3

data-theme

It displays the theme color for the checkbox.

letter (a-z)

Collapsible

Following table lists collapsible elements used with data-role = “collapsible” attribute.

Sr.No. Data-attribute & Description Value
1

data-collapsed

It indicates whether the content should be closed or expanded.

true | false
2

data-collapsed-cue-text

It displays feedback for users with screen reader software.

Default is collapsing content
3

data-collapsed-icon

It defines the icon of collapsible button.

Default icon is “plus”
4

data-content-theme

It displays the theme color for the collapsible content.

letter (a-z)
5

data-expanded-cue-text

It displays feedback for users with screen reader software.

Default is expanding content
6

data-expanded-icon

It displays the collapsible button when you expand the content.

Default icon is “minus”
7

data-iconpos

It defines the position of the icon.

left | right | top | bottom
8

data-inset

It defines whether the collapsible button should display with rounded corners and margin or not.

true | false
9

data-mini

It defines whether the collapsible buttons should display in smaller size or regular size.

true | false
10

data-theme

It displays the theme color for the collapsible button.

letter (a-z)

Collapsible Set

Following table lists the collapsible set elements used with the data-role = “collapsibleset” attribute.

Sr.No. Data-attribute & Description Value
1

data-collapsed-icon

It defines the icon of collapsible button.

Default icon is “plus”
2

data-content-theme

It displays the theme color for the collapsible content.

letter (a-z)
3

data-expanded-icon

It displays the collapsible button when you expand the content.

Default icon is “minus”
4

data-iconpos

It defines the position of the icon.

left | right | top | bottom
5

data-inset

It defines whether the collapsible button should display with rounded corners and margin or not.

true | false
6

data-mini

It defines whether the collapsible buttons should display in smaller size or regular size.

true | false
7

data-theme

It displays the theme color for the collapsible button.

letter (a-z)

Controlgroup

Following table lists Controlgroup elements used with data-role = “controlgroup” attribute −

Sr.No. Data-attribute & Description Value
1

data-exclude-invisible

It defines whether to exclude invisible children in the assignment of rounded corners.

true | false
2

data-mini

It defines whether the group should display in smaller size or regular size.

true | false
3

data-theme

It displays the theme color for the controlgroup.

letter (a-z)
4

data-type

It indicates whether the group should display in horizontal or vertical format.

horizontal | vertical

Dialog

Following table lists dialog elements used with data-dialog=”true” attribute.

Sr.No. Data-attribute & Description Value
1

data-close-btn

It defines the position of the close button.

left | right | none
2

data-close-btn-text

It defines the text for the close button.

text
3

data-corners

It defines whether dialog should display with rounded corners or not.

true | false
4

data-dom-cache

It indicates whether DOM cache must clear or not for individual pages.

true | false
5

data-overlay-theme

It defines the overlay color of the dialog page.

letter (a-z)
6

data-theme

It defines the theme color of the dialog page.

letter (a-z)
7

data-title

It defines the title of the dialog page.

text

Enhancement

Following table lists enhancement elements used with data-enhance=”false” or data-ajax = “false” attribute.

Sr.No. Data-attribute & Description Value
1

data-enhance

You can style the page by setting this attribute to “true”. You cannot style the page if it is set to “false”.

true | false
2

data-ajax

It indicates whether pages must load from Ajax or not.

true | false

Fixed Toolbar

Following table lists the toolbar elements used with data-position = “fixed” attribute.

Sr.No. Data-attribute & Description Value
1

data-disable-page-zoom

It defines whether the user is able to scale/zoom the page or not.

true | false
2

data-fullscreen

It defines toolbars must be positioned at the top and/or bottom.

true | false
3

data-tap-toggle

It indicates whether the user can toggle toolbar-visibility on taps or not.

true | false
4

data-transition

It shows a transition effect when you tap or click the element.

slide | fade | none
5

data-update-page-padding

It updates the padding of page by using resize, transition and update layout events.

true | false
6

data-visible-on-page-show

It defines toolbar-visibility when the parent page is shown.

true | false

Flip Toggle Switch

Following table lists the flip toggle elements used with data-role = “flipswitch” attribute −

Sr.No. Data-attribute & Description Value
1

data-mini

It defines whether the switch should display in smaller size or regular size.

true | false
2

data-on-text

It defines the “on” text on the flip switch.

Default is “on”
3

data-off-text

It defines the “off” text on the flip switch.

Default is “off”

Footer

The following table lists footer elements used with data-role=”footer” attribute −

Sr.No. Data-attribute & Description Value
1

data-id

It defines the unique ID.

text
2

data-position

It defines whether the footer should be positioned at the bottom or inline with page content.

inline | fixed
3

data-fullscreen

It defines whether the footer should be positioned at the bottom and over the page content or not.

true | false
4

data-theme

It defines the theme color of the footer.

letter (a-z)

Header

Following table lists the header elements used with data-role = “header” attribute.

Sr.No. Data-attribute & Description Value
1

data-id

It defines the unique ID.

text
2

data-position

It defines whether the header should be positioned at the bottom or inline with the page content.

inline | fixed
3

data-fullscreen

It defines whether the header should be positioned at the bottom and over the page content or not.

true | false
4

data-theme

It defines the theme color of the header.

letter (a-z)

Inputs

Following table lists the input elements used with type = “text|search|etc” attribute.

Sr.No. Data-attribute & Description Value
1

data-clear-btn

It defines whether the input element should contain clear button or not.

true | false
2

data-clear-btn-text

It defines the text for the clear button.

text
3

data-mini

It defines whether input should display in smaller size or regular size.

true | false
4

data-role

It stops styling input or text areas as buttons.

none
5

data-theme

It defines the theme color of the input element.

letter (a-z)

Link

Following table lists the link elements used with jQuery Mobile.

Sr.No. Data-attribute & Description Value
1

data-ajax

It indicates whether the pages must be loaded through Ajax or not.

true | false
2

data-direction

It is used for reverse transition.

reverse
3

data-dom-cache

It indicates whether jQuery DOM cache must be clear or not for pages.

true | false
4

data-prefetch

It is used to prefetch the pages into DOM.

true | false
5

data-rel

It specifies the behavior of the link.

back | dialog | external | popup
6

data-transition

It defines the transition from one page to another.

fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
7

data-position-to

It defines the position of the popup boxes.

origin | jQuery selector | window

List

Following table shows the list elements used with data-role = “listview” attribute.

Sr.No. Data-attribute & Description Value
1

data-autodividers

It divides the list automatically.

true | false
2

data-count-theme

It defines the theme color of the count element.

letter (a-z)
3

data-divider-theme

It defines the theme color for list divider.

letter (a-z)
4

data-filter

It is used to filter the list values in the search box.

true | false
5

data-filter-placeholder

It defines some text inside the search box.

text
6

data-filter-theme

It defines the theme color for search filter.

letter (a-z)
7

data-icon

It provides the icon for the list.

Default is no icon
8

data-inset

It defines whether list should display with rounded corners and margin or not.

true | false
9

data-split-icon

It defines the icon for split button.

The default icon is “arrow-r”
10

data-split-theme

It defines the theme color for split button.

letter (a-z)
11

data-theme

It defines the theme color for the list.

letter (a-z)

List Item

Following table shows list item elements used with data-role = “listview” attribute.

Sr.No. Data-attribute & Description Value
1

data-filtertext

It is used to filter the list values using the text in the search box.

text
2

data-icon

It provides the icon for the list item.

Default is no icon
3

data-role

It defines the divider for list items.

list-divider
4

data-theme

It defines the theme color for the list item.

letter (a-z)

Navbar

Following table lists the navbar elements used with data-role = “navbar” attribute.

Sr.No. Data-attribute & Description Value
1

data-icon

It provides the icon for the list item.

Default is no icon
2

data-iconpos

It defines the position for the icon.

left | right | top | bottom | notext

Page

Following table lists the page elements used with data-role = “page” attribute.

Sr.No. Data-attribute & Description Value
1

data-dom-cache

It indicates whether DOM cache must clear or not for individual pages.

true | false
2

data-overlay-theme

It defines the overlay color of the dialog pages.

letter (a-z)
3

data-theme

It defines theme color for the page.

letter (a-z)
4

data-title

It provides the title for the page.

Default is no icon
5

data-url

It is used to updating the URL.

url

Popup

Following table lists the popup elements used with data-role = “popup” attribute.

Sr.No. Data-attribute & Description Value
1

data-corners

It defines whether the popup should display with rounded corners and margin or not.

true | false
2

data-dismissible

It defines the whether popup should be close by clicking outside or not.

true | false
3

data-history

It defines the whether popup should display the history of item when opened.

true | false
4

data-overlay-theme

It defines the overlay color of the popup box.

letter (a-z)
5

data-shadow

It displays the shadow for the popup box.

true | false
6

data-theme

It defines theme color for the popup box.

letter (a-z)
7

data-tolerance

It defines the edges of the window.

30, 15, 30, 15

Radio Button

Following table lists the radio button elements used with type = “radio” attribute.

Sr.No. Data-attribute & Description Value
1

data-mini

It defines whether the button should display in smaller size or regular size.

true | false
2

data-role

It stops the styling of radio buttons as enhanced buttons.

none
3

data-theme

It defines the theme color for the radio button.

letter (a-z)

Select

Following table lists the select elements used with jQuery Mobile.

Sr.No. Data-attribute & Description Value
1

data-icon

It provides the icon for the select element.

Default is “arrow-d”
2

data-iconpos

It defines the position of the icon.

left | right | top | bottom
3

data-inline

It defines whether the button should be inline or not.

true | false
4

data-mini

It defines whether select should display in smaller size or regular size.

true | false
5

data-native-menu

It use custom menu when it has been set to false.

true | false
6

data-overlay-theme

It defines the overlay color for the custom select menu.

letter (a-z)
7

data-placeholder

It is used to set an option element of non-native select.

true | false
8

data-role

It stops the styling of select elements as buttons.

none
9

data-theme

It displays the theme color for the select elements.

letter (a-z)

Slider

Following table lists the slider elements used with type = “range” attribute.

Sr.No. Data-attribute & Description Value
1

data-highlight

It highlights the slider.

true | false
2

data-mini

It defines whether the slider should display in smaller size or regular size.

true | false
3

data-role

It stops the styling of slider controls as buttons.

none
4

data-theme

It displays the theme color for the slider control.

letter (a-z)
5

data-track-theme

It displays the theme color for the slider track.

letter (a-z)

Advertisements

”;