Usare la sezione, intestazione e piè di pagina tag al posto di dati-ruolo

Jon Reid nel suo libro jQuery Mobile ha una buona idea di utilizzare i tag HTML5:Usare la sezione, intestazione e piè di pagina tag al posto di dati-ruolo

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

D: E 'possibile per me a sbarazzarsi della data-role = "page", "header", "nav", "footer" se sto usando tag section, header e footer? Forse potrei mettere un po 'di bontà js prima che carichi jQuery Mobile.

In teoria, se ho aggiunto questo prima di caricare jQuery Mobile, che avrebbe funzionato:

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

Hmm ... potrei essere necessario aggiornare gli elementi dopo l'applicazione di questo attributo però. Oppure attiva un metodo di creazione.

fonte

2012-02-06 Phillip Senn

jQm utilizza l'attributo di dati HTML5 per un sacco di aspetto grafico e funzionalità. Rimuovendo ciò si interromperà la funzionalità di jQM. Ora penso che potresti estrarre le parti del jQM di cui avevi bisogno e fare qualcosa di personalizzato in quel modo? So che c'è un builder di download nelle opere ma potresti anche andare al repository git e scaricare uno dei widget disaccoppiati: //github.com/jquery/jquery-mobile/tree/master/js –

Grazie Phill! Quello che voglio dire è: potrei eseguire qualcosa di simile prima di caricare jQuery Mobile: $ ('header'). Attr ('data-role, "header"); –

sì, ma ricorda che l'attributo dati HTML5 è un attributo personalizzato, quindi dovrai aggiungere le tue funzionalità se non stai utilizzando jQM. Per quanto riguarda la rimozione dell'attributo data-role = 'page' jQM usa questo per la navigazione –

Non consiglio di rimuovere = "pagina" dati-ruolo (è necessario per la navigazione ajax), e per altri tag è possibile eseguire

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

fonte

2012-11-17 21:17:43

faccio questo prima che il 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');

fonte

2013-06-20 14:40:52

Usare la sezione, intestazione e piè di pagina tag al posto di dati-ruolo

risposta

Problemi correlati