C++ – Switch Statement
Working samples:
...
switch (expression)
{
case constant1:
group-of-statements-1;
break;
case constant2:
group-of-statements-2;
break;
.
.
.
default:
default-group-of-statements
}
...
C++ – Switch Statement
JQuery Mobile – Responsive – Sliding Panels
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>
JQuery Mobile – Cos’è il Responsive Web design (RWD)?
Lezione #id-jqmobile-2013-0011.html#
Responsive Web Design (RWD) è il design e la programmazione che permettono ad un sito web di essere fruibile su display con caratteristiche e risoluzioni differenti tra loro. La necessità di sviluppare le tecniche RWD nasce e cresce con la diffusione dei dispositivi Mobile, infatti la risoluzione, la dimensione e l’orientamento orizzontale rendono uno Smartphone assai differente dal monitor di un PC in Full HD. “Responsive Web Design” può indicare ad esempio il “Liquid Design”. Un sito “liquido” è costituito da una struttura che si adatta al volo alla risoluzione del display sul quale è visualizzato, come un liquido che si adatta alla forma del bicchiere che lo contiene.
JQuery Mobile presenta diversi widget (gingilli 😉 ) dedicati al RWD:
– Responsive grids -> griglie
– Reflow tables -> tabelle
– Column chooser tables -> selettori di colonne per tabelle
– sliding panels -> pannelli slittanti (questi termini non andrebbero tradotti…)
I punti fondamentali per realizzare un RWD sono:
– Iniziare il progetto sviluppando per il dispositivo meno performante
– CSS media query – min-widht – max-width – per il rilevamento dei dispositivi.
– Una griglia fluida, dove si dimensionano gli elementi in percentuale non con pixel fissi, lo scopo è ricoprire il 100% del display
– Immagini e Media flessibili, la cui dimensione deve essere specificata in unità relative, il cui scopo è riempire i containers che le ospitano. Ad esempio un’immagine con – width=”256″ – non è responsive, la stessa immagine con – width=”100%” è responsive.
– Utilizzare come unità di misura gli ems non i pixel. Per calcolare gli ems scegliere il dispositivo più piccolo nel quale si dovrebbe vedere il carattere, ad esempio uno smartphone da 320px, dividere per la dimensione di default del font, ad esempio 16px, per ottenere 20 ems.
– Dati da scaricare ed elaborare non troppo pesanti, per essere fruibili anche sui dispositivi più datati.
– Dati caricati in base al tipo di dispositivo utilizzando tecniche JavaScript. Ad esempio verranno richieste immagini grandi solo in presenza di display in alta risoluzione.
Un esempio di Responsive Web Design è un Layout che in base al tipo di display decide di disporre i – div – affiancati su 2 colonne o impilati su un’unica colonna.
Un esempio di foglio di stile CSS per RWD:
/* Iniziamo con gli stili che saranno uguali per tutti i dispositivi */
/* Tipografia, elementi etc... */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
/* Definiamo 2 contenitori, uno principale e uno laterale */
.main,
.sidebar { display:block; width:100%; }
/* Prima risoluzione 576px */
/* Il contenitore principale occupa il 60% */
@media all and (min-width: 36em){
.main { float: left; width:60%; }
.sidebar { float: left; width:40%; }
}
/* Seconda risoluzione 800px */
/* Il contenitore principale occupa il 70% */
@media all and (min-width: 50em){
.main { width:70%; }
.sidebar { width:30%; }
/* Posso variare anche altri elementi */
H1 { color: blue; font-size:1.2em }
}
Corso OnLine JQuery Mobile – Temi
Lezione #id-jqmobile-2013-0008#
JQuery Mobile permette di applicare dei temi già pronti o di creare i propri temi personalizzati.
Di default il framework JQuery Mobile ci offre 5 temi identificati a / b / c / d / e
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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 one</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Per creare temi personalizzato possiamo utilizzare il Theme Roller.
1. Andate all’indirizzo:
http://jquerymobile.com/themeroller/! >
2. Cliccare su Get Rolling!
3. Dalla palette dei colori in alto trascinare il colore su un elemento dell’interfaccia.
4. Perfezionare con i comandi sulla colonna di sinistra
5. In alto cliccare su “Download Theme as .zip”
6. Scompattare ed editare a mano se necessario il foglio di stile CSS
7. Have fun!
JQuery Mobile Corso OnLine – Menu a Fisarmonica
Lezione #id-jqmobile-2013-0005#
JQuery Mobile mette a disposizione dei pratici menu a fisarmonica (accordions).
Vediamo il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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>
<!-- ################### -->
<!-- Start of first page -->
<!-- ################### -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Page one</h1>
</div><!-- /header -->
<div data-role="content">
<p>Accordion</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Per creare un menu a fisarmonica il markup da applicare è il seguente:
<div data-role="collapsible-set">
<div data-role="collapsible">
...
</div>
<div data-role="collapsible">
...
</div>
<div data-role="collapsible">
...
</div>
</div>
A ogni div possiamo assegnare i seguenti attributi:
data-inset=”false” -> valori: true / false -> Inset o Full Width
data-mini=”true” -> valori: true / false -> Per avere una versione miniaturizzata
data-collapsed-icon=”arrow-r” data-expanded-icon=”arrow-d” -> assegna le icone per il menu aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-corners=”false” -> valori: true / false -> spigoli arrotondati o spigoli vivi
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema al menu principale e al sottomenù
Differenza tra data-role=”collapsible” e data-role=”collapsible-set”:
data-role=”collapsible-set” apre solo un contenuto per volta
data-role=”collapsible-set” apre anche più contenuti per volta
Ora mettiamo tutto insieme:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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 one</h1>
</div><!-- /header -->
<div data-role="content">
<p>Accordion - Inset</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<p>Accordion - Full Width</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-inset="false">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<p>Accordion - Mini</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<p>Accordion - Icons</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="gear" data-expanded-icon="delete">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" data-iconpos="top">
<h3>Top</h3>
<p>Set via <code>data-iconpos="top"</code> attribute on the collapsible</p>
</div>
</div>
<p>Accordion - Corners</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-corners="false">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
</div>
<p>Accordion - Themes</p>
<div data-role="collapsible-set" data-theme="e" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
