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-cornersIt defines whether the button should contain rounded corners or not. | true | false |
| 2 | data-iconIt defines the icon of the button. | Default is no icon |
| 3 | data-iconposIt defines the position of the icon. | left | right | top | bottom |
| 4 | data-iconshadowIt defines whether the icon of the button should contain shadow or not. | true | false |
| 5 | data-inlineIt defines whether the button should be inline or not. | true | false |
| 6 | data-miniIt defines whether the button should display in smaller size or regular size. | true | false |
| 7 | data-shadowIt defines whether the button should contain shadow or not. | true | false |
| 8 | data-themeIt 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-miniIt defines whether the checkbox should display in smaller size or regular size. | true | false |
| 2 | data-roleIt stops styling of checkboxes as buttons. | none |
| 3 | data-themeIt 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-collapsedIt indicates whether the content should be closed or expanded. | true | false |
| 2 | data-collapsed-cue-textIt displays feedback for users with screen reader software. | Default is collapsing content |
| 3 | data-collapsed-iconIt defines the icon of collapsible button. | Default icon is “plus” |
| 4 | data-content-themeIt displays the theme color for the collapsible content. | letter (a-z) |
| 5 | data-expanded-cue-textIt displays feedback for users with screen reader software. | Default is expanding content |
| 6 | data-expanded-iconIt displays the collapsible button when you expand the content. | Default icon is “minus” |
| 7 | data-iconposIt defines the position of the icon. | left | right | top | bottom |
| 8 | data-insetIt defines whether the collapsible button should display with rounded corners and margin or not. | true | false |
| 9 | data-miniIt defines whether the collapsible buttons should display in smaller size or regular size. | true | false |
| 10 | data-themeIt 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-iconIt defines the icon of collapsible button. | Default icon is “plus” |
| 2 | data-content-themeIt displays the theme color for the collapsible content. | letter (a-z) |
| 3 | data-expanded-iconIt displays the collapsible button when you expand the content. | Default icon is “minus” |
| 4 | data-iconposIt defines the position of the icon. | left | right | top | bottom |
| 5 | data-insetIt defines whether the collapsible button should display with rounded corners and margin or not. | true | false |
| 6 | data-miniIt defines whether the collapsible buttons should display in smaller size or regular size. | true | false |
| 7 | data-themeIt 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-invisibleIt defines whether to exclude invisible children in the assignment of rounded corners. | true | false |
| 2 | data-miniIt defines whether the group should display in smaller size or regular size. | true | false |
| 3 | data-themeIt displays the theme color for the controlgroup. | letter (a-z) |
| 4 | data-typeIt 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-btnIt defines the position of the close button. | left | right | none |
| 2 | data-close-btn-textIt defines the text for the close button. | text |
| 3 | data-cornersIt defines whether dialog should display with rounded corners or not. | true | false |
| 4 | data-dom-cacheIt indicates whether DOM cache must clear or not for individual pages. | true | false |
| 5 | data-overlay-themeIt defines the overlay color of the dialog page. | letter (a-z) |
| 6 | data-themeIt defines the theme color of the dialog page. | letter (a-z) |
| 7 | data-titleIt 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-enhanceYou 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-ajaxIt 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-zoomIt defines whether the user is able to scale/zoom the page or not. | true | false |
| 2 | data-fullscreenIt defines toolbars must be positioned at the top and/or bottom. | true | false |
| 3 | data-tap-toggleIt indicates whether the user can toggle toolbar-visibility on taps or not. | true | false |
| 4 | data-transitionIt shows a transition effect when you tap or click the element. | slide | fade | none |
| 5 | data-update-page-paddingIt updates the padding of page by using resize, transition and update layout events. | true | false |
| 6 | data-visible-on-page-showIt 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-miniIt defines whether the switch should display in smaller size or regular size. | true | false |
| 2 | data-on-textIt defines the “on” text on the flip switch. | Default is “on” |
| 3 | data-off-textIt 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-idIt defines the unique ID. | text |
| 2 | data-positionIt defines whether the footer should be positioned at the bottom or inline with page content. | inline | fixed |
| 3 | data-fullscreenIt defines whether the footer should be positioned at the bottom and over the page content or not. | true | false |
| 4 | data-themeIt 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-idIt defines the unique ID. | text |
| 2 | data-positionIt defines whether the header should be positioned at the bottom or inline with the page content. | inline | fixed |
| 3 | data-fullscreenIt defines whether the header should be positioned at the bottom and over the page content or not. | true | false |
| 4 | data-themeIt 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-btnIt defines whether the input element should contain clear button or not. | true | false |
| 2 | data-clear-btn-textIt defines the text for the clear button. | text |
| 3 | data-miniIt defines whether input should display in smaller size or regular size. | true | false |
| 4 | data-roleIt stops styling input or text areas as buttons. | none |
| 5 | data-themeIt 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-ajaxIt indicates whether the pages must be loaded through Ajax or not. | true | false |
| 2 | data-directionIt is used for reverse transition. | reverse |
| 3 | data-dom-cacheIt indicates whether jQuery DOM cache must be clear or not for pages. | true | false |
| 4 | data-prefetchIt is used to prefetch the pages into DOM. | true | false |
| 5 | data-relIt specifies the behavior of the link. | back | dialog | external | popup |
| 6 | data-transitionIt defines the transition from one page to another. | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none |
| 7 | data-position-toIt 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-autodividersIt divides the list automatically. | true | false |
| 2 | data-count-themeIt defines the theme color of the count element. | letter (a-z) |
| 3 | data-divider-themeIt defines the theme color for list divider. | letter (a-z) |
| 4 | data-filterIt is used to filter the list values in the search box. | true | false |
| 5 | data-filter-placeholderIt defines some text inside the search box. | text |
| 6 | data-filter-themeIt defines the theme color for search filter. | letter (a-z) |
| 7 | data-iconIt provides the icon for the list. | Default is no icon |
| 8 | data-insetIt defines whether list should display with rounded corners and margin or not. | true | false |
| 9 | data-split-iconIt defines the icon for split button. | The default icon is “arrow-r” |
| 10 | data-split-themeIt defines the theme color for split button. | letter (a-z) |
| 11 | data-themeIt 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-filtertextIt is used to filter the list values using the text in the search box. | text |
| 2 | data-iconIt provides the icon for the list item. | Default is no icon |
| 3 | data-roleIt defines the divider for list items. | list-divider |
| 4 | data-themeIt 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-iconIt provides the icon for the list item. | Default is no icon |
| 2 | data-iconposIt 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-cacheIt indicates whether DOM cache must clear or not for individual pages. | true | false |
| 2 | data-overlay-themeIt defines the overlay color of the dialog pages. | letter (a-z) |
| 3 | data-themeIt defines theme color for the page. | letter (a-z) |
| 4 | data-titleIt provides the title for the page. | Default is no icon |
| 5 | data-urlIt 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-cornersIt defines whether the popup should display with rounded corners and margin or not. | true | false |
| 2 | data-dismissibleIt defines the whether popup should be close by clicking outside or not. | true | false |
| 3 | data-historyIt defines the whether popup should display the history of item when opened. | true | false |
| 4 | data-overlay-themeIt defines the overlay color of the popup box. | letter (a-z) |
| 5 | data-shadowIt displays the shadow for the popup box. | true | false |
| 6 | data-themeIt defines theme color for the popup box. | letter (a-z) |
| 7 | data-toleranceIt 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-miniIt defines whether the button should display in smaller size or regular size. | true | false |
| 2 | data-roleIt stops the styling of radio buttons as enhanced buttons. | none |
| 3 | data-themeIt 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-iconIt provides the icon for the select element. | Default is “arrow-d” |
| 2 | data-iconposIt defines the position of the icon. | left | right | top | bottom |
| 3 | data-inlineIt defines whether the button should be inline or not. | true | false |
| 4 | data-miniIt defines whether select should display in smaller size or regular size. | true | false |
| 5 | data-native-menuIt use custom menu when it has been set to false. | true | false |
| 6 | data-overlay-themeIt defines the overlay color for the custom select menu. | letter (a-z) |
| 7 | data-placeholderIt is used to set an option element of non-native select. | true | false |
| 8 | data-roleIt stops the styling of select elements as buttons. | none |
| 9 | data-themeIt 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-highlightIt highlights the slider. | true | false |
| 2 | data-miniIt defines whether the slider should display in smaller size or regular size. | true | false |
| 3 | data-roleIt stops the styling of slider controls as buttons. | none |
| 4 | data-themeIt displays the theme color for the slider control. | letter (a-z) |
| 5 | data-track-themeIt displays the theme color for the slider track. |
Leave a Reply