Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does jQuery Mobile use data-role attributes instead of classes?

This may be a naive question, but I'm learning jQuery Mobile and unsure why everything is related to a data-role attribute. It seems that even times when the role is related to the style, they are using data-role over class

I understand that for semantics, data-role makes sense in a lot of cases but it just seems to be abused here. Wouldn't that kind of lookup also be slower?

Why do they use data-role over class?

Thanks for any insight.

like image 433
Dave Stein Avatar asked May 07 '13 00:05

Dave Stein


People also ask

What is 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" .

Is jQuery Mobile outdated?

The team announced that the cross-platform jQuery Mobile project under its umbrella will be fully deprecated as of October 7, 2021. New technologies for mobile app development have evolved since this project was launched in 2010, so we're encouraging developers to plan for this jQuery Mobile transition.

What is the difference between jQuery and jQuery Mobile?

jQuery is a DOM manipulating/traversing and AJAX JavaScript framework. It abstracts out a lot of the complexity between the different browsers automatically. There are countless jQuery plugins that simplify many task. jQuery Mobile is a UI framework geared to mobile applications that is built on jQuery.

What is Data role in HTML?

Definition and Usage The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.


1 Answers

Why data

They could simply use role as an attribute (like other frameworks do), but this would make the resulting HTML invalid. Therefore a data- is added to every attribute name.

Why not classes

I think the main reason for that is to separate view from logic as far as it is possible. In larger projects, CSS and JavaScript are not written by the same person.

like image 53
TheHippo Avatar answered Sep 20 '22 08:09

TheHippo