”;
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 |
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 |
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” |
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) |
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) |
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) |
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 |
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) |
”;