Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113
Liste con campi di ricerca , contatori e immagini | HTML.it
Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Liste con campi di ricerca , contatori e immagini

Aggiungere campi di ricerca per filtrare elenchi lunghi e contatori per dare "peso" alle voci dell'elenco
Aggiungere campi di ricerca per filtrare elenchi lunghi e contatori per dare "peso" alle voci dell'elenco
Link copiato negli appunti

Un'altra caratteristica molto interessante di jQuery Mobile è quella di poter realizzare molto velocemente un campo di ricerca per filtrare le voci della lista. Come in molti altri casi basterà aggiungere l'attributo data-filter="true" al tag ul contenitore. Proviamo ad applicare questa funzionalità alla nostra

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

.

Figura 3. Inserire un campo di ricerca
Inserire un campo di ricerca

Contatori e immagini

Per arricchire la nostra lista di album, potremmo voler aggiungere un dato sul numero di tracce contenute. Questa operazione viene completata aggiungendo un tag (solitamente uno span) con classe ui-li-count:

<li>
	<a href="#">
		<h3>76</h3>
		<p>Armin van Buuren</p>
		<span class="ui-li-count">13</span>
	</a>
</li>

Il contantore verrà ora visualizzato sulla

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

.

Figura 4. Contatore alle voci elenco
Aggiungere un contatore alle voci elenco

Allo stesso modo in cui possiamo inserire dei contatori, possiamo inserire altri contenuti nella lista, quali immagini e icone. Mentre le prime possono essere aggiunte con un semplice tag img, nel secondo caso sarà necessario aggiungere a tale tag una classe ui-li-icon.

Da notare che, di default, tutte le immagini aggiunte ad una voce di lista verranno automaticamente ridimensionate ad 80x80 pixel.

Per vedere altri esempi ed approfondire la conoscenza delle tipologie di liste disponibili in jQuery Mobile potete fare riferimento alla

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

.

Questo articolo contiene link di affiliazione: acquisti o ordini effettuati tramite tali link permetteranno al nostro sito di ricevere una commissione nel rispetto del codice etico. Le offerte potrebbero subire variazioni di prezzo dopo la pubblicazione.

Ti consigliamo anche