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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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:

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

Per creare un bottone da un elemento di un form:

1
2
3
4
5
6
<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):

1
2
<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:

1
2
3
4
5
<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 –

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

Per assegnare un’icona:

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

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

1
2
3
4
5
<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:

1
2
3
4
5
<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:

1
2
3
4
5
<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:

1
2
3
4
<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:

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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 >