Используйте теги section, header и footer вместо data-role - PullRequest
Новая
       21

Используйте теги section, header и footer вместо data-role

5 голосов
/ 06 февраля 2012

Джон Рейд в своей книге о 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", ""," nav "," footer ", если я использую теги section, header и footer?Может быть, я мог бы добавить немного js-совершенства перед загрузкой jQuery Mobile.

Теоретически, если бы я добавил это до загрузки jQuery Mobile, это сработало бы: 

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

Хмм ... Явозможно, придется обновить элементы после применения этого атрибута.Или вызвать метод создания.

Ответы [ 2 ]

2 голосов
/ 20 июня 2013

Я делаю это до 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');
1 голос
/ 18 ноября 2012

Я не рекомендую удалять 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');
}
...