Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is role="main" used for in jQuery Mobile 1.4?

jQuery Mobile 1.4 has changed

<div data-role="content">...</div>

into

<div role="main" class="ui-content">...</div>

I understand the purpose of using a class now instead of a data-role, but what I don't understand is this role="main". What is it used for?

like image 981
Phillip Senn Avatar asked Dec 26 '13 18:12

Phillip Senn


People also ask

What is the main data role in jQuery Mobile?

A page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header" , class="ui-content" , and data-role="footer" .

What is difference between jQuery and jQuery Mobile?

jQuery and jQueryUI are both designed to be 'added' to your site (desktop or mobile) - if you want to add a particular feature, jQuery or jQueryUI might be able to help. jQuery Mobile, however, is a full framework. It's intended to be your starting point for a mobile site.

Which data role defines navigation lists in jQuery Mobile pages?

A list view is coded as a simple unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window.

What is jQuery Mobile page?

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.


1 Answers

The role attribute is native to HTML5 and meant to support WAI-ARIA.
See http://www.w3.org/TR/html5/dom.html#wai-aria and http://www.w3.org/TR/wai-aria/roles#role_definitions

jQuery Mobile in earlier versions simply transformed elements with the attribute data-role="content" into the main element <div role="main"> (which is equivalent to <main>) and added the CSS. So you get <div role="main" class="ui-content"> .

There was no other processing or added markup for elements with data-role="content". By deprecating the data-role="content" attribute and using ask you to use the correct HTML5 (CSS and WAI-ARIA role) directly, jQuery Mobile will have to do less processing for each page.

like image 57
kheld Avatar answered Oct 03 '22 13:10

kheld