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>
