- jQuery Mobile - Data Attributes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Themes
- jQuery Mobile - Forms
- jQuery Mobile - Events
- jQuery Mobile - Widgets
- jQuery Mobile - Layouts
- jQuery Mobile - Transitions
- jQuery Mobile - Icons
- jQuery Mobile - Pages
- jQuery Mobile - Setup
- jQuery Mobile - Overview
- jQuery Mobile - Home
jQuery Mobile Useful Resources
- jQuery Mobile - Discussion
- jQuery Mobile - Useful Resources
- jQuery Mobile - Quick Guide
- jQuery Mobile - Interview Questions
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery Mobile - Data Attributes
Button
It specifies a cpckable button that includes content pke 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 psts 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-inpne It defines whether the button should be inpne 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 psts 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 stypng of checkboxes as buttons. |
none |
3 | data-theme It displays the theme color for the checkbox. |
letter (a-z) |
Collapsible
Following table psts 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 psts 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 psts 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 psts 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 inspanidual 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 psts 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-visibipty on taps or not. |
true | false |
4 | data-transition It shows a transition effect when you tap or cpck the element. |
spde | 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-visibipty 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 fpp switch. |
Default is "on" |
3 | data-off-text It defines the "off" text on the fpp 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 inpne with page content. |
inpne | 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 inpne with the page content. |
inpne | 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 stypng 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 pnk. |
back | dialog | external | popup |
6 | data-transition It defines the transition from one page to another. |
fade | fpp | flow | pop | spde | spdedown | spdefade | spdeup | 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-autospaniders It spanides the pst automatically. |
true | false |
2 | data-count-theme It defines the theme color of the count element. |
letter (a-z) |
3 | data-spanider-theme It defines the theme color for pst spanider. |
letter (a-z) |
4 | data-filter It is used to filter the pst 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 pst. |
Default is no icon |
8 | data-inset It defines whether pst should display with rounded corners and margin or not. |
true | false |
9 | data-sppt-icon It defines the icon for sppt button. |
The default icon is "arrow-r" |
10 | data-sppt-theme It defines the theme color for sppt button. |
letter (a-z) |
11 | data-theme It defines the theme color for the pst. |
letter (a-z) |
List Item
Following table shows pst item elements used with data-role = "pstview" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-filtertext It is used to filter the pst values using the text in the search box. |
text |
2 | data-icon It provides the icon for the pst item. |
Default is no icon |
3 | data-role It defines the spanider for pst items. |
pst-spanider |
4 | data-theme It defines the theme color for the pst item. |
letter (a-z) |
Navbar
Following table psts the navbar elements used with data-role = "navbar" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-icon It provides the icon for the pst item. |
Default is no icon |
2 | data-iconpos It defines the position for the icon. |
left | right | top | bottom | notext |
Page
Following table psts 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 inspanidual 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 psts 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 cpcking 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 psts 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 stypng 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 psts 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-inpne It defines whether the button should be inpne 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 stypng of select elements as buttons. |
none |
9 | data-theme It displays the theme color for the select elements. |
letter (a-z) |
Spder
Following table psts the spder elements used with type = "range" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-highpght It highpghts the spder. |
true | false |
2 | data-mini It defines whether the spder should display in smaller size or regular size. |
true | false |
3 | data-role It stops the stypng of spder controls as buttons. |
none |
4 | data-theme It displays the theme color for the spder control. |
letter (a-z) |
5 | data-track-theme It displays the theme color for the spder track. |
letter (a-z) |