使用部分，标题和页脚标签，而不是数据角色 [英] Use section, header & footer tags instead of data-role

问题描述

Jon Reid在他的jQuery Mobile书中有一个使用html5标签的好主意:

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

问:如果我使用section，header和footer标签，是否可以摆脱data-role ="page"，"header"，"nav"，"footer"? 也许我可以在jQuery Mobile加载之前放一些js优点.

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.

从理论上讲，如果我在加载jQuery Mobile之前添加了它，那么它将起作用:

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.

推荐答案

我在jQuery Mobile JavaScript之前执行此操作:

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

这篇关于使用部分，标题和页脚标签，而不是数据角色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！