jQuery Mobile Data Attributes

Introduction to jQuery Mobile Data Attributes

jQuery Mobile is a framework designed specifically for creating mobile-friendly web applications. One of its essential features is HTML5 data attributes, which begin with “data-” and can be added to HTML elements to store extra information. These data attributes play a significant role in customizing and enhancing the functionality of mobile web applications developed using jQuery Mobile.

With HTML5 data attributes, you can configure and customize various aspects of jQuery Mobile widgets and elements without writing extensive JavaScript code. These attributes allow you to store information within HTML elements, and then you can access and manipulate this information using JavaScript or jQuery.

Key Takeaways:

• Simplify widget configuration and appearance directly in HTML.
• Minimizes code with markup-based widget initialization instead of manual initialization.
• Enable element customization for a seamless user experience.
• Define Layout, theme, and behavior without extra JavaScript.
• Make code self-explanatory and enhance readability.

Table of Contents

• Introduction
  • Role of Data Attributes
  • Data Attributes
  • Example
  • Use Cases

Role of Data Attributes in jQuery Mobile

• Customize Widgets: Data attributes let you configure various aspects of jQuery Mobile widgets, such as buttons, lists, and navigation bars, by setting options like themes, icons, and transitions without extensive JavaScript coding.
• Store Information: You can store extra information within HTML elements using data attributes, making it accessible and manipulable via JavaScript or jQuery, facilitating dynamic content updates.
• Responsive Design: Data attributes are integral for creating responsive designs that adapt to various screen sizes and orientations, ensuring a seamless user experience on smartphones and tablets.
• Enhance User Experience: By using data attributes to fine-tune interactions and animations, you can improve the overall user experience of your mobile web application.

Here are some standard jQuery Mobile Data attributes:

1. data-role: Specifies the role of an element, such as “button,” “page,” “listview,” etc. It defines how the element should behave and appear within the jQuery Mobile framework.
2. data-theme: Sets the theme for an element, allowing you to control its visual styling. Themes can be “a,” “b,” “c,” or a custom theme name.
3. data-icon: Assigns an icon to an element, like a button or list item. Standard icons like “plus,” “star,” or custom icon classes can be used.
4. data-transition: Determines the transition effect when navigating between pages. Options include “slide,” “fade,” “flip,” and more.
5. data-position-to: Defines the element or viewport relative to which a popup or dialog should be positioned, e.g., “origin,” “window,” “viewport.”
6. data-corners: Specifies whether an element should have rounded corners. Values can be “true” or “false.”
7. data-shadow: Controls the shadow effect for an element. It can be set to “true” or “false.”
8. data-mini: Used for buttons and form elements to create smaller-sized versions for a more compact layout. Values are “true” or “false.”
9. data-inline: Determines if an element, like a button or checkbox, should be displayed in line with other content. Values are “true” or “false.”
10. data-filter-placeholder: Sets the placeholder text for a list filter input field.
11. data-ajax: Specifies whether a link should use AJAX navigation or perform a full page reload. Values are “true” or “false.”

Data Attributes in jQuery Mobile

Widgets are defined with data-role attributes, and we can enhance these widgets with specific data attributes. Let’s explore some standard data attributes:

Button:

With data-role=” button,” we can create a clickable button and enhance the button with additional data attributes as listed below:

Data attribute	Value	Explanation
data-corners	true|false	Specify the round corner for a button with true or false.
data-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search	Add a specific icon to the button. The default is no icon
data-iconpos	left|right|top|bottom|notext	Specify icon position within the button, notext display icon without text
data-iconsshadow	true|false	Enable(true) or disable(false) shadow effect to icon
data-inline	true|false	Enable(true) or disable(false) for button inline
data-shadow	true|false	Enable(true) or disable(false) shadow effect to button
data-theme	swatch letter(a-z)	Apply theme to button, effecting colors and styling
data-type	horizontal/vertical	Group button horizontally or vertically together with data-role=”controlgroup” attribute
data-mini	true|false	Enable(true) or disable(false) button in compact size

Checkbox

Use type=”checkbox” with inputs and labels to represent the checkbox.

Data attribute	Value	Explanation
data-mini	true|false	Enable(true) or disable(false) checkbox in compact size
data-role	none	Prevent jQuery Mobile auto-enhancement
data-theme	swatch letter(a-z)	Provide the theme color for the checkbox

Collapsible

With data-role=”collapsible” we can wrap the heading and a container.

Data attribute	Value	Explanation
data-collapsed	true|false	Determine whether content should be collapsed or expanded
data-collapsed-cue-text	string	Provide audible feedback for users with screen reader software, “click to collapse content” is the default text
data-collapsed-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search|false	Specify collapsible button icon, default is plus
data-content-theme	Swatch letter(a-z)	Apply theme to collapsible content, also add a round corner to collapsible content
data-expanded-cue-text	string	Provide audible feedback for users with screen reader software, “click to expand content” is the default text
data-expandable-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search|false	Specify the collapsible button icon when content is expanded, the default is “minus”
data-iconpos	left|right|top|bottom	Determine icon position
data-insert	true|false	Enable or disable the round-corner to collapsible button
data-mini	true|false	Enable(true) or disable(false) button in compact size
data-theme	swatch letter(a-z)	Apply theme to collapsible button

Collapsible Set

With data-role=”collapsibleset” we can wrap multiple collapsibles into a container.

Data attribute	Value	Explanation
data-collapsed-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search|false	Specify collapsible button icon, default is “plus”
data-content-theme	swatch letter(a-z)	Apply theme to collapsible content, set all collapsible in set
data-expandable-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search	Specify the collapsible button icon when content is expanded, the default is “minus”
data-iconpos	left|right|top|bottom|notext	Determine icon position
data-insert	true|false	Enable or disable the round-corner to collapsible button
data-mini	true|false	Enable(true) or disable(false) button in compact size
data-theme	swatch letter(a-z)	Apply theme to collapsible button, set all collapsible in set

Content

With data-role=”content” we can define a container.

Data attribute	Value	Explanation
data-theme	swatch letter(a-z)	Specify content theme color

Controlgroup

For grouping multiple button-styled elements of a single type, use a <div> or <fieldset> container with data-role=”controlgroup”

Data attribute	Value	Explanation
data-exclude-invisible	true|false	States whether to exclude invisible items in the assignment
data-mini	true|false	Determine whether to display the group in compact size or normal size
data-theme	swatch letter(a-z)	Specify the control group theme color
data-type	horizontal|vertical	Align group items horizontally or vertically

Dialog

A container with data-role=”dailog”

Data-attribute	Value	Explanation
data-close-btn	left|right|none	Provide position to close button
data-close-btn-text	String	Text for close button
data-corners	true|false	Provide round corner to dialog
data-overlay-theme	swatch letter(a-z)	Overlay the background color of dialog page
data-theme	swatch letter(a-z)	Provide them for the dialog page
data-title	string	Provide a title to a dialog page

Enhancement

The data-enhance attribute is used to style the page, making it suitable for mobile devices, and data-ajax specifies page load via Ajax

Data-attribute	Value	Explanation
data-enhance	true|false	Automatically style page when set to true, if set to false, it will not style the page
data-ajax	true|false	Indicate whether to load a page from Ajax or not

Field Container

Container wrap around a group of form elements with data-role=”fieldcontain”

Fixed Toolbar

Creates a container with data-role=”header” or data-role=”footer” together with data-position=”fixed” attribute for the fixed header or footer toolbar

Data-attribute	Value	Explanation
data-disable-page-zoom	true|false	Determine whether a user is able to scale/zoom a page or not
data-fullscreen	true|false	Define toolbars to always be positioned at top or bottom of the page
data-tap-toggle	true|false	Users ability to toggle toolbar-visibility with a tap/click
data-transition	slide|fade|none	Transition for showing/hiding a toolbar
data-update-page-padding	true|false	Update page padding with resize, transition, and update-layout event
data-visible-on-page-show	true|false	Define visibility of toolbar when page is shown

Flip Toggle Switch

Create with data-role=”flipswitch”it allow to toggle between two states usually on and off with a click or swipe

Data-attribute	Value	Explanation
data-mini	true|false	Enable or disable compact size
data-role	none	Prevent auto-enhancement
data-theme	swatch letter(a-z)	Customise switch appearance with theme
data-on-text	string	“on” text on flip switch
data-off-text	string	“off” text on flip switch

Footer

Create a container footer with data-role=”footer” attribute

Data attribute	Values	Explanation
data-id	string	States a unique ID
data-position	inline|fixed	Define whether a footer will be inline with the page or fixed at the bottom
data-theme	swatch letter(a-z)	Theme color of footer

Header:

Create a container header with data-role=”header” attribute

Data attribute	Value	Explanation
data-add-back-btn	true|false	Auto-add back button to header
data-back-btn-text	string	Override the back button default text
data-back-btn-theme	swatch letter(a-z)	Apply theme to back button
data-position	inline|fixed	Define whether a header will be in line with the page content or fixed at the bottom
data-theme	swatch letter(a-z)	Apply theme to header with color and styling
data-title	string	Set title when a page is shown

Inputs

Input with type=” text|search|etc.” or textarea elements are auto-enhanced

Data attribute	Value	Explanation
data-clear-btn	true|false	States whether input will contain a clear button or not
data-clear-btn-text	string	Text for clear button
data-mini	true|false	States input to display in compact or normal size
data-role	none	Prevent jQuery mobile to auto-enhance
data-theme	swatch letter(a-z)	States theme color to input element

Link:

Provide link including button and form submit button

Data attribute	Value	Explanation
data-ajax	true|false	States whether a page must load from Ajax or not
data-direction	reverse	Reverse page or dialog transition
data-dom-cache	true|false	States whether the jQuery DOM cache for page must be clear or not
data-prefetch	true|false	States whether to prefetch pages into DOM
data-rel	back|dialog|external|popup	Specify link behavior, back– go one step back in history, dialog– open link styled as dialog, external– link to another domain, popup– open popup
data-transition	fade|flip|flow|pop|slide|slidedown|slidefade|slideup|turn|none	Page transition from one page to another
data-position-to	origin	determine popup boxes position

List:

Below are the data attributes for unordered<ul> and ordered<ol> list with data-role=”listview”

Data attribute	Value	Explanation
data-auto-dividers	true|false	Automatically divided list item
data-count-theme	swatch letter (a-z)	provide the theme color of the count element
data-divider-theme	swatch letter (a-z)	provide color for the list divider
data-filter	true|false	Filter list view in search boxes
data-filter-placeholder	String	Define search boxes text
data-filter-theme	swatch letter (a-z)	Provide the theme color for search boxes.
data-header-theme	swatch letter (a-z)	Provide the theme color for the header
data-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search|false	Provide list icon
data-inset	true|false	Provide a rounded corner for a list with true value
data-split-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow–r|arrow-l|minus|refresh|forward|back|alert|info|search|	Provide a Split button icon
data-split-theme	swatch letter (a-z)	Provide the theme color for the split button
data-theme	swatch letter (a-z)	Provide the theme color for the list

List item:

Below is the list of attributes used with data-role=”listview”

Data attribute	Value	Explanation
data-filtertext	string	Provide text in a search box for filtering list view
data-icon	home|delete|plus|arrow-u|arrow-d|carat-l|carat-t|carat-r|carat-b|check|gear|grid|star|custom|arrow-r|arrow-l|minus|refresh|forward|back|alert|info|search|false	List item icon
data-role	list-divider	Provide a divider for list items
data-theme	swatch letter(a-z)	Provide the theme color for list item

Navbar:

Create a container wrapped with a number of lists with data-role=”navbar”

Data attribute	Value	Explanation
data-iconpos	left|right|top|bottom|notext	Define icon position

Page

Create a container data-role=”page”

Data attribute	Value	Explanation
data-dom-cache	true|false	States whether to clear jQuery DOM cache for individual pages or not
data-overlay-theme	swatch letter(a-z)	Overlay theme when dialog page opens
data-theme	swatch letter(a-z)	Provide the theme color for the page
data-title	string	Provide page title
data-url	url	Provide value for updating URL, instead of URL request to page

Popup:

Create a container with data-role=”popup”

Data attribute	Value	Explanation
data-corners	true|false	Provide a round corner for the popup with true value
data-dismissible	true|false	Prevent the popup to close by clicking outside the popup when the value is set to false
data-history	true|false	Determine if the popup should create a history item when open
data-overlay-theme	swatch letter(a-z)	Provide overlay color for the pop box
data-position-to	origin|window|selector	Origin- popup centered over the link, window-popup centered in the browser window,selector-cantered over the first element
data-shadow	true|false	Provide shadow for popup box
data-theme	swatch letter(a-z)|none	Provide the theme color of the popup box
data-tolerance	30,15,30,15	Provide distance from window edges(top,right,bottom,left)
data-transition	none	Transition when showing/hiding popup

Radio Button

With type=”radio” Pair labels and input are auto-enhanced.

Data Attribute	Value	Explanation
data-mini	true|false	Display button in compact or normal size
data-role	none	Prevent jQuery Mobile to enhance the radio button
data-theme	swatch letter(a-z)	Provide the theme color for the radio button

Select:

Form elements with select are auto-enhanced

Data attribute	Value	Explanation
data-icon	home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false	Provide an icon to select the element
data-iconpos	left | right | top | bottom | notext	Determine icon position
data-inline	true|false	Determine if the select element should be inline or not
data-mini	true|false	Display select in compact or normal size
data-native-menu	true|false	Use custom menu when set to false
data-overlay-theme	swatch letter(a-z)	Overlay color for custom select menu
data-placeholder	true|false	Set an <option> element of non—native select
data-role	none	Prevent jQuery mobile from enhancing select elements
data-theme	swatch letter(a-z)	Provide the theme color of the selected element

Slider:

Slider elements used with type=”range” are auto-enhanced

Data attribute	Value	Explanation
data-highlight	true|false	Highlight slider track
data-mini	true|false	Display slider in compact or normal size
data-role	none	Prevent jQuery mobile for slider enhancement
data-theme	swatch letter(a-z)	Provide the theme color of the slider control
data-track-theme	swatch letter(a-z)	Provide the theme color of the slider track

Example:

Let us see an example of using data attributes to create a simple page

code:

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile Data Attributes</title>
<link
rel="stylesheet"
href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>jQuery Mobile Data Attribute</h2>
</div>
<div data-role="content">
<h3>Welcome to EDUCBA</h3>
<a href="#" data-role="button" data-icon="star" data-theme="b"
>Button</a
>
</div>
<div data-role="footer">
<h5>Footer Section</h5>
</div>
</div>
</body>
</html>

Output:

Explanation:

• Initially set viewport and character set for responsive layout.
• Provide a link to jQuery Mobile CSS for styling.
• Include jQuery and jQuery Mobile JavaScript from CDN for functionality.
• In the body section, define a page with data-role=”page”
• Create a header section within a page with data-role=”header” and give a title to the header section with <h2>
• Data-role=”content” creates the main content of the page.
• Create a styled button with a link and provide a theme with a data-theme attribute to the button.
• Create a footer section of the page with data-role=”footer”

Use Cases of jQuery Mobile Data Attributes

1. Real-time Form Validation:

jQuery Mobile data attributes play a valuable role in form validation, where data-error and data-success attributes provide immediate feedback when users fill out the form. By setting the data-validate attribute with a ‘true’, one can implement form-validation rules by enforcing users to follow proper guidelines.

2. Ajax Navigation:

Ajax Navigation Is used to navigate from one page to another, and data attributes play a crucial role in controlling the navigation. Let us navigate through some of the important attributes.

1) data-role=”page”: Pages are dynamically loaded using Ajax. Using this attribute, we can control the loading of a component only inside the defined page.

2) data-ajax = “true/false”: The default nature of Ajax is to navigate to a link. Still, the navigation can be controlled by setting whether a page must load from Ajax or not by setting its value to true or false

3) data-transition = “fade|flip|flow|pop|slide|slidedown|slidefade|slideup|turn|none”: It allows us to set Page transition from one page to another

3. List Filtering:

List filtering is one of the most common and widely executed uses of jQuery mobile data attributes. It has beneficial uses in filtering product catalogs, searching through contact lists, etc. With some simple steps, we can filter the list as outlined:

Step 1 – Define the required list to be filtered with the data-role= “list-name” attribute.

Step 2 – Set data filtering action to true with data-filter = “true” attribute.

This will enable the filtering process of the list by giving an input field area where users can enter their required input, and accordingly, the list will be filtered. One can also add a placeholder inside the input field with data-filter-placeholder = “search list”

4. Location-aware feature:

Using the location-aware feature, one can save the page so that if a user navigates from one page to another and wants to return to its initial page, the initial page with all its data will be available. This can be achieved by setting the attribute value as data-dom-cache= “true”.

Conclusion

Data attributes simplify the element appearance to create an interactive user interface. Optimize the development process by minimizing the necessity for manual configuration and boost performance by quickly interpreting the attribute, which leads to a smooth and fast page load. It allows us to focus more on framing the structure and content of mobile web apps while jQuery mobile supervises the widget appearance with data attributes.

Frequently Asked Questions (FAQs)

Q1) How do you lazy load images or content using data attributes?

Answer: No in-built attribute can directly lazy load any image or content, but it can be done in two steps. The first step is to store the image URL using “data-src.” The second step is to use JavaScript to render the image as per requirement.

Q2) What are the safety hazards involved while using data attributes?

Answer:  Source code can be easily hacked, so it is better not to save any passwords for sensitive information in code. If there is still a need, use strong encoding decoding methods like server-side validations and authorization checkpoints. One of the prominent techniques used is cross-site request forgery.

Q3) What is the future of jQuery mobile data attributes?

Answer:  The use of jQuery data attributes is decreased due to the rise of new powerful and handy libraries and frameworks like react, angular, etc. Also, new browsers have evolved to support new features that make it easy for developers to have dynamic engagements. Moreover, community support is available for jQuery. In the near future, it will be used in legacy projects and website maintenance.

Recommended Articles

We hope this EDUCBA information on the “jQuery Mobile Data Attributes” benefited you. You can view EDUCBA’s recommended articles for more information.

1. jQuery Ajax File Upload
2. jQuery Mobile Icons
3. jQuery Click Outside Div
4. jQuery Click Not Working