使用section,header和footer标签而不是data-role

Question

Jon Reid在他的jQuery Mobile书中很好地使用了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 Mobile加载之前放一点js goodness.

从理论上讲,如果我在加载jQuery Mobile之前添加了这个,它会工作:

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

嗯......我可能不得不在应用这个属性后刷新元素.或者触发创建方法.

Answer 1

我不建议删除 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');
}