JQuery Mobile

JQuery Mobile Corso Base – Responsive – Griglie

Lezione #id-jqmobile-2013-0012#

JQuery Mobile per creare un design Responsive offre un sostema di Griglie.

Le Griglie sono invisibili, non hanno bordi o colore di fondo, non hanno padding. In questo modo non interferiscono con il design degli elementi che ospitano al loro interno.

Griglia a 2 colonne:

<div class="ui-grid-a">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->

Notare che la griglia viene indicata da class=”ui-grid-a” e il blocco interno da class=”ui-block-a” se ne aggiungiamo altri seguiranno i blocchi b / c / d / e. Lo stile applicato al singolo blocco è indicato dall’attributo class=”ui-bar ui-bar-e”

Griglia a 3 colonne:

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">Block C</div></div>
</div><!-- /grid-b -->

Notare i blocchi class=”ui-block-a” b / c

Griglia a 4 colonne:

<div class="ui-grid-c">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">D</div></div>
</div><!-- /grid-c -->

Griglia a 5 colonne:

<div class="ui-grid-d">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">D</div></div>
    <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:60px">E</div></div>
</div><!-- /grid-c -->

Griglia a colonne multiple

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>

    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>

    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
</div><!-- /grid-c -->

class=”ui-grid-b” creo una griglia a 3 colonne, inserisco la sequenza dei blocchi.

Griglia che contiene altri elementi

<fieldset class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>

Griglia con una sola cella

<div class="ui-grid-a">
    <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
    <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
</div>
<div class="ui-grid-solo">
    <div class="ui-block-a"><button type="button" data-theme="b">More</button></div>
</div>

JQuery ha già dei parametri proprietari per creare Griglie Responsive. Il breakpoint stabilito è di 560px.
Quando la risoluzione in larghezza della finestra scende sotto i 560px tutti i blocchi si allineano uno sopra l’altro in quanto nel CSS viene assegnata loro un width=100%.
Per valori in larghezza superiori o uguali a 560px gli spazi saranno così suddivisi:

– class=”ui-grid-a” ->2 colonne 50%+50%
– class=”ui-grid-b” ->3 colonne 33%+33%+33%
– class=”ui-grid-c” ->4 colonne 25%+25%+25%+25%
– class=”ui-grid-d” ->5 colonne 20%+20%+20%+20%

Griglia Responsive con i parametri di default, aggiungere l’attributo ui-responsive:

<h3>Grid A (50/50)</h3>
<div class="ui-grid-a ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
</div><!-- /grid-a -->
<h3>Grid B (33/33/33)</h3>
<div class="ui-grid-b ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div><!-- /grid-b -->
<h3>Grid C (25/25/25/25)</h3>
<div class="ui-grid-c ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
    <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
</div><!-- /grid-c -->
<h3>Grid D (20/20/20/20/20)</h3>
<div class="ui-grid-d ui-responsive">
    <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
    <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
    <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
    <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
    <div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
</div><!-- /grid-d -->

Griglia responsive personalizzata, riassegnamo all’attributo ui-block-a b / c / d / e un breakpoint differente dai 560px di default.

/* stack all grids below 40em (640px) */
@media all and (max-width: 35em) {
	.my-breakpoint .ui-block-a,
	.my-breakpoint .ui-block-b,
	.my-breakpoint .ui-block-c,
	.my-breakpoint .ui-block-d,
	.my-breakpoint .ui-block-e {
		width: 100%;
		float: none;
	}
}

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso Base – Responsive – Griglie
Read More

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 }
}

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile – Cos’è il Responsive Web design (RWD)?
Read More

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!

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su Corso OnLine JQuery Mobile – Temi
Read More

JQuery Mobile Corso Base – Transizioni

Lezione #id-jqmobile-2013-0003#

JQuery Mobile fornisce effetti di transizione applicabili all’apertura di nuove pagine o all’invio da un form di dati.

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>
	
	<style type="text/css"> 
	table { width:100%; border-spacing: 0; }
	th { text-align:left; }
	th h3 { margin:.6em 0 .6em .5em; }
	th, td { vertical-align:top; border-top:1px solid #eee; padding: 1px 3px; background-color:#fcfcfc; }
	td .ui-btn { margin:.4em 0 .5em 0; }
	td .ui-btn-inner { padding: .4em 15px; }
	</style>
	
</head>
<body>

<table margin="0">
    <tbody><tr>
        <th><h3>fade</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
    </tr>
</tbody></table>


</body>

</body>
</html>

Vedi il codice in azione! >

Prendiamo in considerazione la riga:

data-transition="slide"

Al tag HTML – href – possiamo assegnare un attributo per le transizioni con il valore:
data-transition=”fade” -> dissolvenza
data-transition=”pop” -> comparsa
data-transition=”flip” -> capovolgi
data-transition=”turn” -> svolta pagina
data-transition=”flow” -> la finestra si rimpicciolisce ed esce
data-transition=”slidefade” -> diapositiva + dissolvenza
data-transition=”slide” -> diapositiva da destra a sinistra
data-transition=”slideup” -> diapositiva verso l’alto
data-transition=”slidedown” -> diapositiva verso il basso
data-transition=”none” -> nessuna transizione

Attenzione! Per vedere tutte le transizioni il browser in uso deve supportare le trasformazioni 3D altrimenti ogni tipo transizione sarà rappresentata con la dissolvenza “fade”.

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso Base – Transizioni
Read More

JQuery Mobile per niubbi – Popup-Tooltip-Lightbox Gallery

Lezione #id-jqmobile-2013-0007#

JQuery Mobile mette a disposizione differenti offetti di Popup, dal tooltip alla photo gallery lightbox.

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>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
	
	<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
	<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup, no options set.</p>
	</div>
	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

La parte che ci interessa è:

	<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
	<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup, no options set.</p>
	</div>

Assegnamo al div l’attributo div data-role=”popup”

Possiamo assegnare ulteriori attributi:

data-dismissible=”false” il click al di fuori della finestra dipopup non la chiude come succede di default, costringe il navigatore ad interagire con la finestra

<div data-role="popup" id="popupUndismissible" class="ui-content" style="max-width:280px" data-dismissible="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
    <p>I have the <code>data-dismissible</code> attribute set to <code>false</code>. I'm not closeable by clicking outside of me.</p>
</div>

href=”#positionWindow” -> posiziona al centro della finesta
href=”#positionOrigin” -> posiziona vicino all’origine
href=”#positionSelector” -> posiziona nel div dell’elemento con id=nome…

<a href="#positionWindow" data-role="button" data-inline="true" data-rel="popup" data-position-to="window">Position to window</a>
<a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="origin">Position to origin</a>
<a href="#positionSelector" data-role="button" data-inline="true" data-rel="popup" data-position-to="#position-header">Position to #position-header</a>
<div data-role="popup" id="positionWindow" class="ui-content" data-theme="d">
    <p>I am positioned to the window.</p>
</div>
<div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
    <p>I am positioned over the origin.</p>
</div>
<div data-role="popup" id="positionSelector" class="ui-content" data-theme="d">
    <p>I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.</p>
</div>

data-transition=”none” -> assegna una transizione

<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="fade" data-role="button" data-inline="true" data-rel="popup">Fade</a>
<a href="#transitionExample" data-transition="flip" data-role="button" data-inline="true" data-rel="popup">Flip</a>
<a href="#transitionExample" data-transition="turn" data-role="button" data-inline="true" data-rel="popup">Turn</a>
<a href="#transitionExample" data-transition="flow" data-role="button" data-inline="true" data-rel="popup">Flow</a>
<a href="#transitionExample" data-transition="slide" data-role="button" data-inline="true" data-rel="popup">Slide</a>
<a href="#transitionExample" data-transition="slidefade" data-role="button" data-inline="true" data-rel="popup">Slidefade</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div data-role="popup" id="transitionExample" class="ui-content" data-theme="d">
    <p>I'm a simple popup.</p>
</div>

Temi

<a href="#theme" data-rel="popup" data-role="button" data-inline="true">Theme A</a>
<div id="theme" data-role="popup" data-theme="a" class="ui-content">
  <p>I have <code>data-theme="a"</code> set on me</p>
</div>
<a href="#transparent" data-rel="popup" data-role="button" data-inline="true">Theme "none", no shadow</a>
<div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <img src="img/firefox-logo.png" class="popphoto" alt="firefox logo on a transparent popup">
</div>
<a href="#overlay" data-rel="popup" data-role="button" data-inline="true">Overlay theme A</a>
<div id="overlay" data-role="popup" data-overlay-theme="a" class="ui-content">
  <p>I have a <code>data-overlay-theme="a"</code> set on me</p>
</div>
<a href="#both" data-rel="popup" data-role="button" data-inline="true">Theme E + overlay A</a>
<div id="both" data-role="popup" data-overlay-theme="a" data-theme="e" class="ui-content">
  <p>I have <code>data-theme="e"</code> and <code>data-overlay-theme="a"</code> set on me</p>
</div>

Menu 

        <a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Actions...</a>
	<div data-role="popup" id="popupMenu" data-theme="d">
        <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
            <li data-role="divider" data-theme="e">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
	</div>

E’ sufficiente annidare una lista all’interno del div div data-role=”popup”

Menu Accordion

    <a href="#popupNested" data-rel="popup" data-role="button" data-inline="true" data-icon="bars" data-theme="b" data-transition="pop">Choose a creature...</a>
    <div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
            <h2>Farm animals</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Chicken</a></li>
                <li><a href="#" data-rel="dialog">Cow</a></li>
                <li><a href="#" data-rel="dialog">Duck</a></li>
                <li><a href="#" data-rel="dialog">Sheep</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
            <h2>Pets</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Cat</a></li>
                <li><a href="#" data-rel="dialog">Dog</a></li>
                <li><a href="#" data-rel="dialog">Iguana</a></li>
                <li><a href="#" data-rel="dialog">Mouse</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
            <h2>Ocean Creatures</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Fish</a></li>
                <li><a href="#" data-rel="dialog">Octopus</a></li>
                <li><a href="#" data-rel="dialog">Shark</a></li>
                <li><a href="#" data-rel="dialog">Starfish</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
            <h2>Wild Animals</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Lion</a></li>
                <li><a href="#" data-rel="dialog">Monkey</a></li>
                <li><a href="#" data-rel="dialog">Tiger</a></li>
                <li><a href="#" data-rel="dialog">Zebra</a></li>
            </ul>
        </div><!-- /collapsible -->
    </div><!-- /collapsible set -->

Form:

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Please sign in</h3>
            <label for="un" class="ui-hidden-accessible">Username:</label>
            <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">
            <button type="submit" data-theme="b" data-icon="check">Sign in</button>
        </div>
    </form>
</div>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|1 Comment
Read More