jQuery 手机 : difference between data-role and role/class

Question

我是 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"的单独 Angular 色是什么-内容”？我以为 data-role 只是为了让 jQuery 在 pagecreate 中应用类，在这种情况下，role="main" 是否在做同样的事情？如果是，他们为什么同时使用两者？

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

谢谢!

Answer 1

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

jQuery Mobile 决定弃用某些内容的原因 data-role的，是为了加快初始化并减少增强 DOM 元素的时间。此外，已弃用的 data-role不是小部件，因此它们在 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.

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

• 已弃用 $.fn.mobile.fieldcontain()和 data-role=”field-contain” .只需添加类 “ui-field-contain” .

• 已弃用 data-role=”content”和选项 contentTheme ( data-theme )。这也意味着框架不再添加 ARIA Angular 色 “main” .添加类 ui-content和 role=”main”而是在您的标记中。

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