English 中文(简体)
jQuery Mobile - Data Attributes
  • 时间:2024-09-08

jQuery Mobile - Data Attributes


Previous Page Next Page  

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

Fixed Toolbar

Following table psts 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-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

Fpp Toggle Switch

Following table psts the fpp toggle elements used with data-role = "fppswitch" 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 fpp switch.

Default is "on"
3

data-off-text

It defines the "off" text on the fpp switch.

Default is "off"

Footer

The following table psts 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 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)

Header

Following table psts 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 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)

Inputs

Following table psts 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 stypng 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 psts the pnk 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 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

List

Following table shows the pst elements used with data-role = "pstview" attribute.

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)
Advertisements