Lezione #id-jqmobile-2013-0017#
JQuery Mobile ci permette di utilizzare dei pannelli slittanti. L’interfaccia con pannelli slittanti è utilizzata dalle APP più famose, quali l’APP di facebook e l’APP di google+.
Vedi il codice in azione per capire di cosa stiamo parlando! >
Parametri da assegnare al container panel:
data-role=”panel” -> assegna al div il ruolo di pannello, non sarà mostrato finchè non vi è un richiamo dalla pagina principale. IL DIV PER LO SLIDING PANEL VA POSIZIONATO O PRIMA DI HEADER O DOPO FOOTER, MAI ALL’INTERNO.
data-position=”left” -> valore left / right -> apre il pannello da destra o sinistra.
data-display=”overlay” -> valore overlay / reveal -> apre il pannello sovrapponendolo alla pagina principale o spostando la pagina principale
data-animate=”false” -> valore true / false -> abilita e disabilita l’animazione dello slide
data-position-fixed=”true” -> fissa la posizione del panel
La classe CSS del panel è ui-panel-inner, di default width=17em (272px)
Qui il codice completo pronto da copiare ed incollare:
<!DOCTYPE html> <html> <head> <title>jQuery - Sliding Panels</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="one"> <div data-role="header"> <h1>Page Header</h1> </div><!-- /header --> <div data-role="content"> <p><a href="#nav-panel-left" data-rel="close">OPEN panel LEFT</a></p> <p><a href="#nav-panel-right" data-rel="close">OPEN panel RIGHT</a></p> <p><a href="#nav-panel-overlay" data-rel="close">OPEN panel OVERLAY</a></p> <p><a href="#nav-panel-reveal" data-rel="close">OPEN panel REVEAL</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> <!-- panel START --> <div data-role="panel" data-theme="a" id="nav-panel-left" data-position="left"> <ul data-role="listview" data-theme="a" class="nav-search"> <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> <li><a href="#panel-fixed-page2">Link 1</a></li> <li><a href="#panel-fixed-page2">Link 2</a></li> <li><a href="#panel-fixed-page2">Link 3</a></li> <li><a href="#panel-fixed-page2">Link 4</a></li> <li><a href="#panel-fixed-page2">Link 5</a></li> </ul> </div><!-- /panel END --> <!-- panel START --> <div data-role="panel" data-theme="a" id="nav-panel-right" data-position="right"> <ul data-role="listview" data-theme="a" class="nav-search"> <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> <li><a href="#panel-fixed-page2">Link 1</a></li> <li><a href="#panel-fixed-page2">Link 2</a></li> <li><a href="#panel-fixed-page2">Link 3</a></li> <li><a href="#panel-fixed-page2">Link 4</a></li> <li><a href="#panel-fixed-page2">Link 5</a></li> </ul> </div><!-- /panel END --> <!-- panel START --> <div data-role="panel" data-theme="a" id="nav-panel-overlay" data-display="overlay"> <ul data-role="listview" data-theme="a" class="nav-search"> <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> <li> Lorem ipsum dolor sit amet </li> </ul> </div><!-- /panel END --> <!-- panel START --> <div data-role="panel" data-theme="a" id="nav-panel-reveal" data-display="reveal"> <ul data-role="listview" data-theme="a" class="nav-search"> <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li> <li> Lorem ipsum dolor sit amet </li> </ul> </div><!-- /panel END --> </div><!-- /page --> </body> </html>