Jquery mobile 使用节、标题和；页脚标记而不是数据角色

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">

嗯。。。但是，在应用此属性之后，我可能必须刷新元素。

---

或者触发一个create方法。

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

---

在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');

---

jQm将HTML5数据属性用于许多外观和功能。删除它会破坏jQM的功能。现在，我认为您可以提取所需的jQM部分，并以这种方式进行定制？我知道有一个下载构建器正在开发中，但你也可以去git repo下载一个解耦的widgetshttps://github.com/jquery/jquery-mobile/tree/master/jsThanks 菲尔！我的意思是：在加载jQuery Mobile:$（'header'）.attr（'data-role，'header'））之前，我是否可以运行类似的操作；是的，但请记住HTML5数据属性是一个自定义属性，因此如果不使用jQM，则需要添加自己的功能。至于删除data role='page'属性，jQM将其用于导航，我想使用jQM，但我想在涉及html时，我会变得简约。为什么同时使用header标记和data role=“header”属性？为什么不让html看起来更干净，在mobileinit上做一些预处理呢？目前有几种不同的方法可以做到这一点，但似乎没有一种是超棒的。我会像Phill所说的那样小心重写数据role=“page”在JQM构建页面时会保存视图状态信息，您可以手动将HTML5语法包装到div中。

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