Uso sección, las etiquetas de cabecera y pie de página en lugar de datos en roles

Jon Reid en su libro jQuery Mobile tiene una buena idea de utilizar las etiquetas HTML5:Uso sección, las etiquetas de cabecera y pie de página en lugar de datos en roles

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

Q: ¿Es posible que me deshaga de la data-role = "página", "encabezado", "nav", "pie de página" si utilizo etiquetas de sección, encabezado y pie de página? Tal vez podría poner un poco de js bondad antes de que se cargue jQuery Mobile.

En teoría, si he añadido esto antes de cargar jQuery Mobile, que funcionaría:

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

Hmm ... puede ser que tenga que actualizar los elementos después de aplicar este atributo sin embargo. O active un método de creación.

Fuente

2012-02-06 Phillip Senn

jQm utiliza el atributo de datos HTML5 para una gran cantidad de apariencia y funcionalidad. Eliminar eso rompería la funcionalidad de jQM. ¿Ahora creo que podría extraer las partes de jQM que necesitaba y hacer algo personalizado de esa manera? Sé que hay un generador de descargas en proceso, pero también podrías dirigirte al repositorio de git y descargar uno de los widgets desacopladoshttps: //github.com/jquery/jquery-mobile/tree/master/js –

¡Gracias, Phill! Lo que quiero decir es: ¿podría ejecutar algo como esto antes de cargar jQuery Mobile: $ ('header'). Attr ('data-role,' header '); –

sí, pero recuerde que el atributo de datos HTML5 es un atributo personalizado, por lo que deberá agregar su propia funcionalidad si no está utilizando jQM. En cuanto a quitar el atributo data-role = 'page', jQM usa esto para la navegación –

No recomiendo para eliminar los datos en roles = "página" (que es necesaria para la navegación Ajax), y para otras etiquetas puede ejecutar

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

Fuente

2012-11-17 21:17:43

hago esto antes de que el 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');

Fuente

2013-06-20 14:40:52

Uso sección, las etiquetas de cabecera y pie de página en lugar de datos en roles

Respuesta

Cuestiones relacionadas