使用セクションでは、代わりにデータ・役割の彼のjQueryモバイルブックで

Question

ジョン・リードのヘッダー＆フッタータグは、HTML5のタグを使用しての良いアイデアを持っていますsection、header、footerタグを使用している場合、data-role = "page"、 "header"、 "nav"、 "footer" jQuery Mobileが読み込まれる前に、jsの良さを少し入れてもいいかもしれません。

私はjQueryのモバイルをロードする前にこれを追加した場合、理論的に、それは動作します：

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

うーん...でも、私は、この属性を適用した後の要素を更新する必要がある場合があります。 または、作成メソッドをトリガーします。私は、データ-役割=「ページ」を削除することはお勧めしません

Answer 1

（それはAjaxのナビゲーションのために必要だ）、および他のタグのために私はjQueryのモバイルJavaScriptを前に、これを行う

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

Answer 2

を実行することができます。

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