2012-02-06 1 views
5

Jon Reid w książce jQuery Mobile ma dobry pomysł wykorzystania znaczników HTML5:Wykorzystanie sekcji Nagłówek i stopka tagów zamiast danych-roli

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

Q: Czy jest możliwe dla mnie pozbyć się data-role = "page", "header", "nav", "footer", jeśli używam tagów sekcji, nagłówka i stopki? Być może mógłbym umieścić trochę js dobroci przed ładowaniami jQuery Mobile.

Teoretycznie, jeśli dodałem to przed załadowaniem jQuery Mobile, to działa:

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

Hmm ... Może muszę odświeżyć elementy po zastosowaniu tego atrybutu chociaż. Lub wywołaj metodę create.

+0

jQm używa atrybutu danych HTML5 dla wielu wyglądu i sposobu działania. Usunięcie tej opcji zepsułoby funkcjonalność jQM. Teraz myślę, że możesz wyciągnąć części jQM, których potrzebujesz i zrobić coś w ten sposób? Wiem, że w pracach jest narzędzie do pobierania, ale możesz też przejść do repozytorium git i pobrać jeden z rozłączonych widgetshttps: //github.com/jquery/jquery-mobile/tree/master/js –

+0

Dzięki Phill! Mam na myśli: czy mogę uruchomić coś takiego przed załadowaniem jQuery Mobile: $ ("header"). Attr ("data-role," header "); –

+0

tak, ale pamiętaj, że atrybut danych HTML5 jest niestandardowym atrybutem, więc będziesz musiał dodać własną funkcjonalność, jeśli nie korzystasz z jQM. Jeśli chodzi o usuwanie atrybutu data-role = 'page', jQM używa tego do nawigacji –

Odpowiedz

1

Nie polecam usunąć data-role = "strona" (jest to niezbędne do nawigacji Ajax), a dla innych tagów można uruchomić

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

zrobić to przed jQuery Telefony 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');