JQuery Mobile

JQuery Mobile OnLine – Finestre di dialogo

Lezione #id-jqmobile-2013-0002#

JQuery Mobile permette di aprire una nuova pagina HTML come fosse una finestra di dialogo.

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>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#two" data-rel="dialog" data-transition="flip">two</a></p>
	</div><!-- /content -->

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

<!-- #################### -->
<!-- Start of second page -->
<!-- #################### -->

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

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

	<div data-role="content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#one">Back to page one</a></p>
	</div><!-- /content -->

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

</body>

</html>

Vedi il codice in azione! >

Prendiamo in considerazione la riga:

<a href="#two" data-rel="dialog" data-transition="flip">two</a>

Al tag HTML – href – possiamo assegnare gli attributi:
data-rel=”dialog” -> apri il link come una finestra di dialogo

data-transition=”flip” per una transizione che capovolge
data-transition=”pop” per una transizione popup
data-transition=”slidedown” per una transizione che scorre verso il basso
etc…

Vedi tutte le transizioni disponibili >

data-close-btn=”right” per posizionare a destra il bottone di chiusura
data-close-btn=”none” per nascondere il bottone di chiusura

Nella finestra di dialogo per i link generati da JavaScript si può tornare alla pagina precedente con la seguente sintassi:
href=”#” rel=”back”

Stili e temi:
data-corners=”false” per togliere i bordi arrotondati

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile OnLine – Finestre di dialogo
Read More

JQuery Mobile Corso Base – Cos’è JQuery Mobile – Struttura Pagine

Lezione #id-jqmobile-2013-0001#

JQuery Mobile è un framework in JavaScript basato su JQuery.

Vediamo la sintassi di base:

<!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>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#two">two</a></p>
	</div><!-- /content -->

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

<!-- #################### -->
<!-- Start of second page -->
<!-- #################### -->

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

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

	<div data-role="content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#one">Back to page one</a></p>
	</div><!-- /content -->

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

</body>

</html>

Notiamo dal tag di apertura che si tratta di una pagina HTML5.

Prima di tutto scriviamo:

<meta name="viewport" content="width=device-width, initial-scale=1">

Questa istruzione evita che il browser del nostro dispositivo attivi lo zoom di default.
La larghezza della nostra pagina sarà uguale alla risoluzione del display content=”width=device-width, evitando di dover effettuare lo zoom a mano dei contenuti.

Poi carichiamo i framework e i fogli di stile:


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

Il documento HTML può contenere una o più pagine. Se vi sono più pagine sarà visibile solo la prima in ordine di caricamento, quella più alta nel listato di codice.
Ogni pagina è delimitata da:

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

All’interno di ogni pagina definiamo un header, un footer e un content. Non è una struttura obbligatoria, ma consigliata se si vuole che i fogli di stile di default del framework vengano applicati correttamente.

ATTENZIONE: gli id che identificano gli elementi dei form devono essere univoci, non solo all’interno della pagina, ma in tutto il sito. Questo è necessario perchè JQuery Mobile permette di inserire contemporaneamente più pagine all’interno dello stesso DOM. La navigazione AJAX viene gestita in modo differente rispetto ad HTML5 standard.

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso Base – Cos’è JQuery Mobile – Struttura Pagine
Read More

JQuery Mobile Corso Base – Bottoni

Lezione #id-jqmobile-2013-0004#

JQuery Mobile mette a disposizione un’ampia scelta di funzioni dedicate ai bottoni.

I bottoni possono essere creati da link o dai bottoni di un form.

Vediamo la sintassi di base:

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

<a href="#" data-role="button">Anchor</a>
<form>
    <button>Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

</body>
</html>

Per creare un bottone da un link:

<a href="#" data-role="button">Anchor</a>

Per creare un bottone da un elemento di un form:

<form>
    <button>Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Per posizionare i bottoni su una stessa linea (di default si posizionano su linee differenti):


    <a href="#" data-role="button" data-inline="true">True</a>
    <a href="#" data-role="button" data-inline="true">False</a>

Per assegnare ai bottoni un tema tra queli inclusi in JQuery:


    <a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
    <a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
    <a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
    <a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
    <a href="#" data-role="button" data-theme="e" data-inline="true">E</a>

Per assegnare una versione più piccola – mini –

    <a href="#" data-role="button" data-mini="true">Cancel</a>

Per assegnare un’icona:

	<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">Place order</a>

L’attributo data-icon=”check” può valere:

data-icon=”plus”
data-icon=”minus”
data-icon=”delete”
data-icon=”arrow-l”
data-icon=”arrow-r”
data-icon=”arrow-u”
data-icon=”arrow-d”
data-icon=”check”
data-icon=”gear”
data-icon=”refresh”
data-icon=”forward”
data-icon=”back”
data-icon=”grid”
data-icon=”star”
data-icon=”alert”
data-icon=”info”
data-icon=”home”
data-icon=”search”
data-icon=”bars”
data-icon=”edit”

Per posizionare le icone:

<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">Right</a>

L’attributo data-iconpos=”right può valere:

data-iconpos=”left”
data-iconpos=”right”
data-iconpos=”top”
data-iconpos=”bottom”
data-iconpos=”notext”

Per creare gruppi verticali di bottoni:

<div data-role="controlgroup">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

Rinchiudere i bottoni tra un div con attributo data-role=”controlgroup”, JQuery rimuoverà in automatico le ombre, arrotonderà il primo e l’ultimo bottone a applicherà una soluzione grafica piacevole.

Per creare gruppi orizzontali:

<div data-role="controlgroup"  data-type="horizontal">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

Il codice che ci interessa è data-type=”horizontal”

Versione mini:

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" data-role="button" data-iconpos="notext" data-icon="plus" data-theme="b">Add</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="delete" data-theme="b">Delete</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="grid" data-theme="b">More</a>
</div>

Bordi arrotondati e ombre:

<a href="#" data-role="button" data-icon="gear" data-theme="b">Default</a>
<a href="#" data-role="button" data-icon="gear" data-corners="false" data-theme="b">No rounded corners</a>
<a href="#" data-role="button" data-icon="gear" data-shadow="false" data-theme="b">No button shadow</a>
<a href="#" data-role="button" data-icon="gear" data-iconshadow="false" data-theme="b">No icon disc shadow</a>

Gli attributi che ci interessano sono:
data-corners=”false” -> false o true -> bordi arrotondati
data-shadow=”false” -> false o true -> ombra del bottone
data-iconshadow=”false” -> false o true -> ombra dell’icona

Bottoni disabilitati:

<a href="#" data-role="button" class="ui-disabled">Disabled anchor via class</a>
<form>
    <button disabled="">Button with disabled attribute</button>
    <input type="button" value="Input with disabled attribute" disabled="">
</form>

Posso disabilitare un bottone in due modi:
– con la classe class=”ui-disabled”
– con l’attributo disabled=””

Mettiamo tutto insieme, così al bisogno potremo copiare ed incollare porzioni di questo codice già pronto:

<!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>
<p>Sintassi di base</p>
<a href="#" data-role="button">Anchor</a>
<form>
    <button>Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

<p>Bottoni sulla stessa linea</p>
<p>
    <a href="#" data-role="button" data-inline="true">True</a>
    <a href="#" data-role="button" data-inline="true">False</a>
</p>

<p>Temi inclusi in JQuery</p>
<p>
    <a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
    <a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
    <a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
    <a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
    <a href="#" data-role="button" data-theme="e" data-inline="true">E</a>
</p>

<p>Versione Mini</p>
<p>
    <a href="#" data-role="button" data-mini="true">Cancel</a>
</p>

<p>Assegnare icona</p>
<p>
<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">Place order</a>
</p>

<p>Le icone disponibili</p>
<p>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Arrow left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Arrow right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Arrow up</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Arrow down</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Check</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Gear</a>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Forward</a>
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Back</a>
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Grid</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Star</a>
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Alert</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Home</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Search</a>
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true">Bars</a>
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
</p>

<p>Posizione per le icone</p>
<p>
<a href="#" data-role="button" data-inline="true">Text only</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-inline="true">Left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">Right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top" data-inline="true">Top</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom" data-inline="true">Bottom</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Icon only</a>
</p>

<p>Gruppi Verticali</p>
<div data-role="controlgroup">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

<p>Gruppi Orizzontali</p>
<div data-role="controlgroup"  data-type="horizontal">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

<p>Versione mini</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" data-role="button" data-iconpos="notext" data-icon="plus" data-theme="b">Add</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="delete" data-theme="b">Delete</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="grid" data-theme="b">More</a>
</div>

<p>Bordi arrotondati e ombre</p>
<p>
<a href="#" data-role="button" data-icon="gear" data-theme="b">Default</a>
<a href="#" data-role="button" data-icon="gear" data-corners="false" data-theme="b">No rounded corners</a>
<a href="#" data-role="button" data-icon="gear" data-shadow="false" data-theme="b">No button shadow</a>
<a href="#" data-role="button" data-icon="gear" data-iconshadow="false" data-theme="b">No icon disc shadow</a>
</p>

<p>Bottoni disabilitati</p>
<p>
<a href="#" data-role="button" class="ui-disabled">Disabled anchor via class</a>
<form>
    <button disabled="">Button with disabled attribute</button>
    <input type="button" value="Input with disabled attribute" disabled="">
</form>
</p>

</body>
</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile|Commenti disabilitati su JQuery Mobile Corso Base – Bottoni
Read More