使用部分，页眉和页脚的标签，而不是数据角色

乔恩·里德在他的jQuery Mobile的书有使用HTML5标签的好主意：使用部分，页眉和页脚的标签，而不是数据角色

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

问：是否有可能对我来说，摆脱data-role =“page”，“header”，“nav”，“footer”如果我正在使用section，header和footer标签？也许我可以在jQuery Mobile加载之前添加一点js的优点。

理论上，如果我加入这个加载jQuery Mobile的面前，它的工作：

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

嗯...我可能有应用，虽然这个属性之后刷新的元素。或触发创建方法。

来源

2012-02-06 Phillip Senn

jQm将HTML5数据属性用于很多外观和功能。删除那些会打破jQM功能。现在我想你可以拉出你需要的jQM的部分，并以这种方式做一些自定义的事情？我知道工作中有一个下载构建器，但您也可以转到git repo并下载其中一个解耦的widgetshttps：//github.com/jquery/jquery-mobile/tree/master/js – 2012-02-06 18:45:15

谢谢Phill！我的意思是：我可以在加载jQuery Mobile之前运行如下的代码：$（'header'）。attr（'data-role，“header”）; – 2012-02-06 18:51:17

是的，但请记住，HTML5数据属性是一个自定义属性，所以如果您不使用jQM，您将需要添加自己的功能。至于去除data-role ='page'属性jQM使用这个导航 – 2012-02-06 18:54:51

我不建议删除数据角色=“页面”（这是必要的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'); 
}

来源

2012-11-17 21:17:43

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

来源

2013-06-20 14:40:52

使用部分，页眉和页脚的标签，而不是数据角色

回答

相关问题