jQuery mobile：数据角色和角色/类之间的区别答案

【问题标题】：jQuery mobile: difference between data-role and role/classjQuery mobile：数据角色和角色/类之间的区别
【发布时间】：2014-02-15 03:21:42
【问题描述】：

我对 jQuery 和网页设计真的很陌生，请原谅我提出这个幼稚的问题。

在latest jQuery mobile website 上，他们的示例如下：

<div role="main" class="ui-content">
    <p>Page content goes here.</p>
</div><!-- /content -->

还有on some older ones，他们有：

 <div data-role="content">
     <p>Page content goes here.</p>
 </div>

我的问题是： 1）这只是一个版本问题，对于新版本，第一种情况优于第二种情况？

我个人觉得有点不舒服，因为我有data-role="page"，或"header"，或"footer"，但中间的不一致。

2) 我试图在他们的 API 文档中找到这部分，但找不到 - role="main" 和 class="ui-content" 的单独作用是什么？我认为数据角色只是让 jQuery 在 pagecreate 应用类，在这种情况下，role="main" 是否也在做同样的事情？如果是，为什么他们同时使用？

我知道第二个问题是一个非常大的问题，只要有人可以将我指向可以解释这一点的文档链接，我将不胜感激。

谢谢！

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

data-role="content" 已在 jQuery Mobile 的第一个版本中使用，直到 1.3.2。在新的稳定版本中，它已更改为 <div role="main" class="ui-content">，除了其他 data-role 已被删除并替换为类。

jQuery Mobile 决定弃用某些data-role 的原因是为了加快初始化 并减少增强 DOM 元素的时间。此外，已弃用的 data-role 不是 widgets，因此它们在 jQM API 中没有任何特殊功能。

性能 (reference)

为了提高性能，我们减少了 DOM 操作。为按钮样式的元素生成内部标记已被完全删除。在许多情况下，框架只是在增强过程中向本机元素添加类，我们甚至减少了框架添加的类的数量。

一些已弃用的data-role: (reference)

已弃用 $.fn.mobile.fieldcontain() 和 data-role=”field-contain”。只需添加类“ui-field-contain”。
已弃用 data-role=”content” 和选项 contentTheme (data-theme)。这也意味着框架不再添加 ARIA 角色“main”。改为在您的标记中添加类 ui-content 和 role=”main”。

另外，.buttonMarkup() 和 data-role="button" 已弃用，将在 1.5 中删除。

【讨论】：