使用部分，頁眉和頁腳的標籤，而不是數據角色

喬恩·裏德在他的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

使用部分，頁眉和頁腳的標籤，而不是數據角色

回答

相關問題