Menu
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?
981
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" .
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.
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.
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.
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.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
