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优点。

理论上，如果我在加载jQuery Mobile之前添加了它，它就可以工作：

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

嗯......我可能必须在应用此属性后刷新元素。或者触发创建方法。

Answer 1

我在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

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

使用section，header＆amp;页脚标签而不是数据角色

2 个答案: