jQuery mobile: difference between data-role and role/class
css, html, jquery, jquery-mobile
Solution
`data-role="content"` has been used in jQuery Mobile first version until 1.3.2. In the new stable version it has been changed into `<div role="main" class="ui-content">`, in addition to other `data-role`'s that have been removed and replaced with classes instead.
The reason jQuery Mobile has decided to deprecated some `data-role`'s, is to speed up initialization and reduce time in enhancing DOM elements. Moreover, the deprecated `data-role`'s are not widgets, so they don't have any special functions in jQM API.
Performance (reference)
To improve performance we reduced DOM manipulation. Generation of inner markup for elements styled as butons has been completely removed. In many cases the framework just adds classes to the native element during enhancement and we even reduced the amount of classes that are added by the framework.
Some of deprecated `data-role`'s: (reference)
Deprecated `$.fn.mobile.fieldcontain()` and `data-role=”field-contain”`. Just add class `“ui-field-contain”`.
Deprecated `data-role=”content”` and option contentTheme (`data-theme`). This also means that the framework no longer adds ARIA role `“main”`. Add class `ui-content` and `role=”main”` in your markup instead.
Also, `.buttonMarkup()` as well as `data-role="button"` are deprecated and will be removed in 1.5.
Problem
I am really new to jQuery and web design, and please do excuse me for asking this naive question. On the latest jQuery mobile website, they have example as: ``` <div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content --> ``` And on some older ones, they have: ``` <div data-role="content"> <p>Page content goes here.</p> </div> ``` My questions are: 1) Is this just a version issue, that the 1st case is preferred to the 2nd case, for the new version? I personally feel a little bit uncomfortable because I have `data-role="page"`, or `"header"`, or `"footer"`, but is being inconsistent for the middle one. 2) I tried to find this part on their API doc, but can't find it - what is the separate role of `role="main"`, and `class="ui-content"`? I thought the data-role is just for jQuery to apply classes at pagecreate, and in this case, is `role="main"` doing the same thing? If it is, why are they using both? I know the 2nd question is a very big one, and as long as someone can point me to a documentation link that can explain this I'd really appreciate it. Thank you!