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>

Il mio sito ufficiale >