Componenti per input avanzati

A parte i campi input introdotti da HTML5, jQuery Mobile offre un'interfaccia mobile friendly per altri tipi di controlli, solitamente più complessi da compilare sui disposibivi mobile.

Radio e checkbox

Anzitutto le aree sensibili di radio e checkbox sono allargate a tutto lo schermo per renderli facilmente selezionabili.

Ecco un markup di esempio per dei controlli radio:

<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
		<legend>Formato brani online:</legend>
	     	<input type="radio" name="formato-brano" id="formato-brano-1" value="MP3" checked="checked" />
	     	<label for="formato-brano-1">MP3</label>
	     	<input type="radio" name="formato-brano" id="formato-brano-3" value="OGG" />
	     	<label for="formato-brano-3">OGG</label>
	     	<input type="radio" name="formato-brano" id="formato-brano-4" value="WMA" />
	     	<label for="formato-brano-4">WMA</label>
	</fieldset>
</div>

Mentre questo potrebbe essere il markup per dei controlli checkbox:

<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
		<legend>Formato album:</legend>
	     	<input type="checkbox" name="formato-album-1" id="formato-album-1" value="CD" checked="checked" />
	     	<label for="formato-album-1">CD</label>
	     	<input type="checkbox" name="formato-album-2" id="formato-album-2" value="vinile" />
	     	<label for="formato-album-2">Vinile</label>
	     	<input type="checkbox" name="formato-album-3" id="formato-album-3" value="solo digitale" />
	     	<label for="formato-album-3">solo digitale</label>	
	</fieldset>
</div>

Ambedue questi tipi di campi vengono visualizzati in verticale, ma è comunque possibile affiancare le opzioni (creando così una struttura simile alla lista di bottoni) aggiungendo al contenitore l'attributo data-type="horizontal".

Menu a tendina

Sempre nell'ottica di aumentare l'usabiltià delle form web, anche ai menu a tendina (select) vengono applicati degli stili particolari in modo da renderli più visibili e facilmente cliccabili. In realtà, poiché le select sono tendenzialmente difficili da modificare via CSS, il controllo viene nascosto e sostituito da un elemento JavaScript in ascolto per modifiche al campo nativo.

Per abilitare questa funzionalità non serve aggiungere alcun attributo al tag, in quanto jQuery Mobile applicherà i propri stili in maniera automatica.

Nel caso fosse necessario mantenere lo stile nativo del controllo è comunque possibile aggiungere un attributo data-role="none" alla select.

Come nel caso precedente, è possibile raggruppare più select per indicarne la correlazione racchiudendole in un tag fieldset con attributo data-role="controlgroup". jQuery Mobile, oltre a raggruppare visivamente i campi, utilizzerà le corrispondenti label come valore iniziale di default del campo.

Interruttori

Un controllo che si ritrova spesso in ambiente iOS è l'interruttore on/off che viene utilizzato per abilitare e disabilitare determinate funzionalità dell'applicazione

In jQuery Mobile questo controllo può essere realizzato a partire da un menu a tendina con due opzioni ed attributo data-role="slider":

<label for="flip-a">Notifiche attive:</label>
<select name="slider" id="notifiche-attive" >
	<option value="no">No</option>
	<option value="si">Si</option>
</select>

Slider

Con HTML 5 è stato aggiunto il nuovo tipo di campo numerico range. Il valore di questo campo viene impostato trascinando un cursore con il mouse. L'idea è quella di riprodurre altre esperienze simili come i controlli per il volume di una radio.

Anche in questo caso, jQuery Mobile applicherà automaticamente un proprio stile all'elemento senza dover aggiungere alcun attributo. Ecco il markup di cui avrete bisogno per realizzare uno slider con valori compresi fra 0 e 100 ed un valore iniziale impostato a 25:

<label for="slider-0">Etichetta slider</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />

Un form di esempio

Dopo questa carrellata di campi, ecco come potremmo utilizzarli per realizzare il form di inserimento di nuovi album nella nostra applicazione.