Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery / Jquery Mobile

Jquery Mobile: Difference Between Data-role And Role/class

Post a Comment
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:

Solution 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.

Post a Comment for "Jquery Mobile: Difference Between Data-role And Role/class"