Use section, header & footer tags instead of data-role

Question

Jon Reid in his jQuery Mobile book has a good idea of using html5 tags:

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

Q: Is it possible for me to get rid of the data-role="page","header","nav", "footer" if I'm using section, header and footer tags? Maybe I could put a bit of js goodness in before jQuery Mobile loads.

Theoretically, if I added this before loading jQuery Mobile, it would work:

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

Hmm... I might have to refresh the elements after applying this attribute though. Or trigger a create method.

Answer 1

I do this before the jQuery Mobile 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

I don't recommend to remove data-role="page" (it's necessary for ajax navigation), and for other tags you can run

$(":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');
}