­

JQuery Mobile

Tutorial JQuery Mobile – Elemento pieghevole – collapsible

Lezione #id-jqmobile-2013-0006#

JQuery Mobile mette a disposizione elementi pieghevoli (collapsible).

Vediamo il seguente codice:

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
<!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">
 
    <div data-role="collapsible">
        <h4>Heading</h4>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
        </div>
 
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
 
</body>
 
</html>

Per creare un menu pieghevole il markup da applicare è il seguente:

1
2
3
4
<div data-role="collapsible">
    <h4>Heading</h4>
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>

Dovbbiamo assegnare:
1. al div l’attributo data-role=”collapsible”
2. è importante iniziare con un tag da h1 a h6, questo sarà il contenuto di testa dell’elemento, quello che resta visibile dopo averlo collassato.

A ogni div possiamo assegnare i seguenti attributi:
data-collapsed=”false” -> valori: true / false -> Per espandere il contenuto al caricamento della pagina.
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 l’elemento aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema all’header e al sottomenù
data-inset=”false” -> valori: true / false -> Per avere attivare e disattivare i bordi.

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

Per i forms utilizziamo i tag:

1
2
3
<legend>
 
<fieldset>

Ad esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
    <fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
        <legend>Legend</legend>
        <label for="textinput-f">Text Input:</label>
        <input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

Ora mettiamo tutto insieme:

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
122
123
124
125
126
127
128
129
130
131
132
133
<!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>Basic</p>
    <div data-role="collapsible">
        <h4>Heading</h4>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
     
    <p>Theme</p>
    <div data-role="collapsible" data-theme="b" data-content-theme="d">
        <h4>Heading</h4>
        <p>I'm the collapsible content with a themed content block set to "d".</p>
    </div>
     
    <p>Expanded</p>
    <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
    <h4>Heading</h4>
    <ul data-role="listview">
        <li><a href="#">List item 1</a></li>
        <li><a href="#">List item 2</a></li>
        <li><a href="#">List item 3</a></li>
    </ul>
    </div>
     
    <p>Mini</p>
    <div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="a">
    <h4>Heading</h4>
    <ul data-role="listview">
        <li><a href="#">List item 1</a></li>
        <li><a href="#">List item 2</a></li>
        <li><a href="#">List item 3</a></li>
    </ul>
    </div>
     
    <p>Icons</p>
    <div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-iconpos="right">
    <h4>Heading</h4>
    <ul data-role="listview" data-inset="false">
        <li>Read-only list item 1</li>
        <li>Read-only list item 2</li>
        <li>Read-only list item 3</li>
    </ul>
    </div>
 
    </div><!-- /content -->
     
    <p>Legend</p>
    <form>
    <fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
        <legend>Legend</legend>
        <label for="textinput-f">Text Input:</label>
        <input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
    </form>
     
    <p>Non-inset</p>
    <div data-role="collapsible" data-inset="false" data-theme="c" data-content-theme="d">
        <h4>Heading</h4>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
     
    <p>Set o collapsible</p>
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    <h3>Pets</h3>
    <ul data-role="listview">
        <li><a href="#">Canary</a></li>
        <li><a href="#">Cat</a></li>
        <li><a href="#">Dog</a></li>
        <li><a href="#">Gerbil</a></li>
        <li><a href="#">Iguana</a></li>
        <li><a href="#">Mouse</a></li>
    </ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    <h3>Farm animals</h3>
    <ul data-role="listview">
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Cow</a></li>
        <li><a href="#">Duck</a></li>
        <li><a href="#">Horse</a></li>
        <li><a href="#">Pig</a></li>
        <li><a href="#">Sheep</a></li>
    </ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    <h3>Wild Animals</h3>
    <ul data-role="listview">
        <li><a href="#">Aardvark</a></li>
        <li><a href="#">Alligator</a></li>
        <li><a href="#">Ant</a></li>
        <li><a href="#">Bear</a></li>
        <li><a href="#">Beaver</a></li>
        <li><a href="#">Cougar</a></li>
        <li><a href="#">Dingo</a></li>
    </ul>
</div><!-- /collapsible -->
     
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
 
</body>
 
</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su Tutorial JQuery Mobile – Elemento pieghevole – collapsible
Read More

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:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <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:

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

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso OnLine – Menu a Fisarmonica
Read More

JQuery Mobile – Liste

Lezione #id-jqmobile-2013-0009#

JQuery Mobile mette a disposizione degli attributi pensati apposta per gli elenchi non ordinati (ul) e ordinati (ol).

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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">
 
    <ul data-role="listview">
        <li>Acura</li>
            <li>Audi</li>
            <li>BMW</li>
            <li>Cadillac</li>
            <li>Ferrari</li>
    </ul>
 
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
 
</body>
 
</html>

Agli elenchi non ordinati assegnamo l’attributo: ul data-role=”listview”

Agli elenchi ordinati assegnamo l’attributo: ol data-role=”listview”

Altri attributi:

data-inset=”true” -> true o false -> attiva e disattiva i bordi arrotondati

data-filter=”true” data-filter-placeholder=”Search fruits…” -> true o false -> nasconde gli elementi – li – in tempo reale durante la ricerca

data-filter=”true” data-filter-reveal=”true” data-filter-placeholder=”Search fruits…” -> true o false -> mostra gli elementi – li – in tempo reale durante la ricerca

data-role=”list-divider” -> aggiunge un divisorio

data-autodividers=”true” -> aggiunge un divisorio colorato

span class=”ui-li-count”>12 -> aggiunge un contatore (Count bubbles)

data-icon=”gear” -> aggiunge un’unicona standard

Per aggiungere icona personalizzata 16×16

1
<li><a href="#"><img src="../../_assets/img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>

Per aggiungere una miniatura 80×80 px

1
2
3
4
5
<li><a href="#">
    <img src="img/firefox-logo.png">
    <h2>Content</h2>
    <p>Content</p></a>
</li>

Bottoni con separazione, notare che lo split può avere un tema differente dal resto dell’elemento.

1
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">

Un listato di esempio con altre variazioni sul tema:

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!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>Elenco non ordinato</p> 
<ul data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>
 
<p>Elenco ordinato</p> 
<ol data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ol>
 
<p>Linked</p>
<ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>
 
<p>Inset</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>
 
<p>Filter</p>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>
 
<p>Filter Reveal</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>
 
<p>Divider</p>
<ul data-role="listview" data-inset="true" data-divider-theme="d">
    <li data-role="list-divider">Mail</li>
    <li><a href="#">Inbox</a></li>
    <li><a href="#">Outbox</a></li>
    <li data-role="list-divider">Contacts</li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Work</a></li>
</ul>
 
<p>Autodividers</p>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>
 
<p>Count Bubbles</p>
<ul data-role="listview" data-count-theme="c" data-inset="true">
    <li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
    <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
    <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>
 
<p>Icons 16x16</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#"><img src="img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
    <li><a href="#"><img src="img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
</ul>
 
<p>Thumbnails automatic resize 80x80 px</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
</ul>
 
<p>Split Buttons</p>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Warning</h2>
        <p>Hot Chip</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Wolfgang Amadeus Phoenix</h2>
        <p>Phoenix</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
    <h3>Purchase Album?</h3>
    <p>Your download will begin immediately on your mobile device when you purchase.</p>
    <a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
    <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>
 
<p>Formatted content</p>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
    <li><a href="index.html">
        <h2>Stephen Weber</h2>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </a></li>
    <li><a href="index.html">
        <h2>jQuery Team</h2>
        <p><strong>Boston Conference Planning</strong></p>
        <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
        <p class="ui-li-aside"><strong>9:18</strong>AM</p>
    </a></li>
    <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
    <li><a href="index.html">
        <h2>Avery Walker</h2>
        <p><strong>Re: Dinner Tonight</strong></p>
        <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
        <p class="ui-li-aside"><strong>4:48</strong>PM</p>
    </a></li>
</ul>
 
<p>Themes</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
    <li data-role="list-divider">Divider</li>
    <li><a href="index.html" data-theme="e">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>
 
<p>No white icon sprite</p>
<ul data-role="listview" data-inset="true" class="ui-icon-alt">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>
 
<p>Forms</p>
<form>
    <ul data-role="listview" data-inset="true">
        <li data-role="fieldcontain">
            <label for="name2">Text Input:</label>
            <input type="text" name="name2" id="name2" value="" data-clear-btn="true">
        </li>
        <li data-role="fieldcontain">
            <label for="textarea2">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
        </li>
        <li data-role="fieldcontain">
            <label for="flip2">Flip switch:</label>
            <select name="flip2" id="flip2" data-role="slider">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </li>
        <li data-role="fieldcontain">
            <label for="slider2">Slider:</label>
            <input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
        </li>
        <li data-role="fieldcontain">
            <label for="select-choice-1" class="select">Choose shipping method:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option value="standard">Standard: 7 day</option>
                <option value="rush">Rush: 3 days</option>
                <option value="express">Express: next day</option>
                <option value="overnight">Overnight</option>
            </select>
        </li>
        <li class="ui-body ui-body-b">
            <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </fieldset>
        </li>
    </ul>
</form>
 
 
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
 
</body>
 
</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile – Liste
Read More

JQuery Mobile Corso OnLine – Form Elements

Lezione #id-jqmobile-2013-0010#

JQuery mobile ci permette di arricchire di nuove funzioni tutti gli elementi tipici di un form.

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.

Qui sotto un pò di codice raccolto dal sito ufficiale già pronto da copiare ed incollare :)

Vedi il codice in azione! >

Ecco il listato della pagina linkata sopra:

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!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">
     
 
<label for="textinput-2">Text Input:</label>
<input name="textinput-2" id="textinput-2" placeholder="Text input" value="" type="text">
 
<label for="search-2">Search Input:</label>
<input name="search-2" id="search-2" value="" type="search">
 
<label for="textarea-2">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-2" id="textarea-2">Textarea</textarea>
 
<label for="select-native-2">Native select:</label>
<select name="select-native-2" id="select-native-2">
    <option value="small">One</option>
    <option value="medium">Two</option>
    <option value="large">Three</option>
</select>
 
<label for="select-multiple-2">Custom multiple select:</label>
<select multiple="multiple" data-native-menu="false" name="select-multiple-2" id="select-multiple-2">
    <option value="">Choices:</option>
    <option value="small">One</option>
    <option value="medium">Two</option>
    <option value="large">Three</option>
</select>
 
<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, buttons:</legend>
    <button data-icon="home" data-iconpos="right">One</button>
    <input data-icon="back" data-iconpos="right" value="Two" type="button">
    <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Three</a>
</fieldset>
 
<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, buttons:</legend>
    <button data-icon="home" data-iconpos="right">One</button>
    <input data-icon="back" data-iconpos="right" value="Two" type="button">
    <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Three</a>
</fieldset>
 
<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, select:</legend>
    <label for="select-v-2a">Select A</label>
    <select name="select-v-2a" id="select-v-2a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-v-2b">Select B</label>
    <select name="select-v-2b" id="select-v-2b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-v-2c">Select C</label>
    <select name="select-v-2c" id="select-v-2c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</fieldset>
 
<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, select:</legend>
    <label for="select-h-2a">Select A</label>
    <select name="select-h-2a" id="select-h-2a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-2b">Select B</label>
    <select name="select-h-2b" id="select-h-2b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-2c">Select C</label>
    <select name="select-h-2c" id="select-h-2c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</fieldset>
 
<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, mixed:</legend>
    <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Link</a>
    <button data-icon="grid" data-iconpos="notext">Button</button>
    <label for="select-v-2e">Select</label>
    <select name="select-v-2e" id="select-v-2e">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</fieldset>
<p>Slider:</p>
<label for="slider-2">Slider:</label>
<input name="slider-2" id="slider-2" value="50" min="0" max="100" data-highlight="true" type="range">
 
<div data-role="rangeslider">
    <label for="range-1a">Rangeslider:</label>
    <input name="range-1a" id="range-1a" min="0" max="100" value="40" type="range">
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="0" max="100" value="80" type="range">
</div>
 
<label for="flip-2">Flip toggle:</label>
<select name="flip-2" id="flip-2" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>
 
<fieldset data-role="controlgroup">
    <legend>Single checkbox:</legend>
    <label for="checkbox-2">I agree</label>
    <input name="checkbox-2" id="checkbox-2" type="checkbox">
</fieldset>
 
<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, checkbox:</legend>
    <input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox">
    <label for="checkbox-v-2a">One</label>
    <input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox">
    <label for="checkbox-v-2b">Two</label>
    <input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox">
    <label for="checkbox-v-2c">Three</label>
</fieldset>
 
<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, radio:</legend>
    <input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
    <label for="radio-choice-v-2a">One</label>
    <input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
    <label for="radio-choice-v-2b">Two</label>
    <input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
    <label for="radio-choice-v-2c">Three</label>
</fieldset>
 
<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, checkbox:</legend>
    <input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
    <label for="checkbox-h-2a">One</label>
    <input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
    <label for="checkbox-h-2b">Two</label>
    <input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
    <label for="checkbox-h-2c">Three</label>
</fieldset>
 
<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, radio:</legend>
    <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
    <label for="radio-choice-h-2a">One</label>
    <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio">
    <label for="radio-choice-h-2b">Two</label>
    <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio">
    <label for="radio-choice-h-2c">Three</label>
</fieldset>
 
<label for="submit-2">Send:</label>
<button type="submit" id="submit-2">Submit</button>
 
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
     
</div><!-- /page -->
 
</body>
 
</html>

Il mio sito ufficiale >

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

Corso Base OnLine JQuery Mobile – Fissare header e footer

Lezione #id-jqmobile-2013-0015#

JQuery Mobile ci permette di fissare header e footer della nostra pagina con l’attributo data-position=”fixed”.

Vediamo il codice:

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
<!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" data-position="fixed">
        <h1>Page Header FIXED</h1>
    </div><!-- /header -->
 
    <div data-role="content">
<p>
Lorem ipsum dolor sit amet....
</p>     
    </div><!-- /content -->
 
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer FIXED</h4>
    </div><!-- /footer -->
</div><!-- /page -->
 
</body>
 
</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su Corso Base OnLine JQuery Mobile – Fissare header e footer
Read More