使用节、页眉和页脚标记而不是数据角色

Question

Jon Reid在他的jQuery手机书中有一个使用html5标签的好主意：

<section data-role="page">
<header data-role="header">
<nav data-role="navbar">
<div data-role="content">
<footer data-role="footer">

问:如果我使用section、header和footer标签，是否可以去掉data-role="page"，"header"，"nav"，"footer“？也许我可以在jQuery手机加载之前加入一些js的好处。

从理论上讲，如果我在加载jQuery移动版之前添加这个，它会起作用：

$('header').attr('data-role','header');

嗯..。不过，在应用此属性后，我可能需要刷新元素。或者触发create方法。

Answer 1

在jQuery移动JavaScript之前，我会这样做：

$('section').attr('data-role','page');
$('article').attr('data-role','content');
$('header').attr('data-role','header');
$('nav').attr('data-role','navbar');
$('aside').addClass('ui-li-aside');
$('ul').not('nav > ul').not('.nolst').attr('data-role','listview').attr('data-inset','true');
$('ol').not('nav > ol').attr('data-role','listview').attr('data-inset','true');;
$('a').not('li > a').not('.nobtn').attr('data-role','button');
$('footer').attr('data-role','footer');

Answer 2

我不建议删除data-role="page“(这对于ajax导航是必需的)，对于其他标记，您可以运行

$(":jqmData(role='page')").live('pagebeforecreate', function(){
    var $page=$(this);
    $page.find("header:not([data-role])").attr('data-role', 'header');
    $page.find("nav:not([data-role])").attr('data-role', 'navbar');
    $page.find("footer:not([data-role])").attr('data-role', 'footer');
}