jQuery mobile: difference between data-role and role/class

Question

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!

Answer 1

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.