Come prima cosa dai una rapida occhiata alle due componenti della pagina dopo di chè disabilità Javascript e ricarica... capirai subito la differenza!
In ogni caso questo componente à pensato come alternativa alle combo box server side fornendo un'interfaccia più complessa.
Ci si serve di una dialog per presentare le possibili scelte. Nelle prossime versioni ci sarà la possibilità di filtrare i dati nella dialog prima di effettuare la scelta.
Come si può intuire dai due esempi à possibile accedere ad un vasto set di dati per effettuare compilazioni complesse: dal riferimento all'utente possiamo compilare tutti i dati relativi all'intestazione di una fattura ad esempio!
Nato Il: scegli un utente e vedi...
Professione:
HTML:
<span id="ck1">
<label>Dati Utente:</label>
<input type="text" name="contact_id" class="value" />
<input type="text" name="contact_show" class="label" />
</span>
<strong>Nato Il:</strong> <span id="ck1_data">scegli un utente e vedi...</span>
<strong>Professione:</strong> <input type="text" id="ck1_lavoro" value="">
JAVASCRIPT:
$('#ck1').choose('users.txt');
In questo esempio ho attivato il controllo "choose" ad una coppia di campi utilizzati
per contenere l'id ed il label di un'informazione.
È importante osservare l'assegnazione delle classi in quanto vengono utilizzate
dal plugin per effettuare le opportune procedure.
La parte Javascript è estremamente semplice: viene applicato il plugin all'elemento contenitore specificando, come unico parametro, l'url della sorgente dati per la popolazione dei dati di selezione. (Si veda: Sorgente dati).
Il risultato ottenuto è un elemento totalmente funzionante che gestisce in modo autonomo l'apertura, la selezione e la compilazione dei dati per il campo "choose".
Si noti inoltre come vengono compilati anche i campi Nato il e
Professione.
La funzionalità di autocompilazione delle informazioni aggiuntive
è un goal di "choose".
Nella definizione delle colonne per la tabella di sorgente dati è possibile definire l'attributo "for" che identifica il campo di destinazione dell'informazione contenuta in quella colonna. Quando si seleziona un valore nella dialog il valore della colonna scope=data tenterà di andare a compilare il campo #IDcontrollo_data (In questo esempio "ck1_data" e "ck1_lavoro") producendo un'automazione sensazionale nell'automazione della gestione dei dati!
Questo modulo di selezione è accessibile in quanto il componente "choose" viene
generato a partire da un tag SELECT.
Ovviamente è necessario fornire una precompilazione del tag. Oltretutto il
componente si auto-precompila con il valore selezionato come "selected".
Nazione:
Popolazione:
Estensione:
xHTML:
<select id="ck2" name="location_id">
<option value="it">Italia</option>
<option value="gb" selected="selected">Inghilterra</option>
<option value="fr">Francia</option>
<option value="sp">Spagna</option>
</select>
JAVASCRIPT:
$('#ck2').choose({
useDblClick: true,
onChoose: function(obj) {
obj.chooseDialog({
source: 'nations.txt',
onChoose: function( src ) {
$('#pop').html(src.pop);
$('#km').html(src.km);
}
});
}
});Il primo utilizzo è relativo al primo esempio in questa pagina e prevede l'implementazione di due campi di testo racchiusi in un elemento cui viene applicato il plugin:
<span id="ck1">
<label>Dati Utente:</label>
<input type="text" name="contact_id" class="value" />
<input type="text" name="contact_show" class="label" />
</span>
Il secondo modo per ottenere un componente "choose" à partire da un tag SELECT,
ovvero il classico menu a tendina.
Il plugin provvederà a trasformare l'xHTML della select per portarlo ad essere compatibile
con il controllo "choose": verrà prodotto, al posto di SELECT, una struttura xHTML del tutto
simile a quella appena vista.
<select id="ck2" name="location_id">
<option value="it">Italia</option>
<option value="gb" selected="selected">Inghilterra</option>
<option value="fr">Francia</option>
<option value="sp">Spagna</option>
</select>Vediamo ora il codice Javascript da inserire nel blocco "$(document).ready()" per attivare un controllo "choose":
Nazione:
$('#ck3').choose();
Questo è sufficiente ad attivare il controllo permettendo così di
poter utilizzare le funzioni $.chooseGet(), $.chooseSet()
e $.chooseReset() che vedremo in seguito.
Questa inizializzazione implementa anche il tasto "choose" che genera l'apertura della
dialog di selezione che però rimane vuota.
Per poter caricare dei dati e renderli disponibili alla selezione è necessario dichiarare l'url del file sorgente dati.
Tale file altro non è che una tabella xHTML contenente una riga di intestazione colonne ed una sezione con il contenuto dei dati da utilizzare per la selezione:
<table class="src">
<thead>
<tr>
<th>Id</th>
<th>Nazione</th>
<th>Popolazione</th>
<th>Estensione</th>
</tr>
</thead>
<tbody>
<tr>
<th>it</th>
<td>Italia</td>
<td>53.000</td>
<td>22.000Km</td>
</tr>
<tr>
<th>gb</th>
<td>Inghilterra</td>
<td>98.000</td>
<td>9.000 Km</td>
</tr>
<tr>
<th>fr</th>
<td>Francia</td>
<td></td>
<td></td>
</tr>
<tr>
<th>sp</th>
<td>Spagna</td>
<td>5.000</td>
<td>89.000 Km</td>
</tr>
</tbody>
</table>Di questa tabella è importante mantenere la classe in quanto è utilizzata dal plugin per interpretare la tabella come sorgente dati.
È inoltre importante la presenza di una sezione THEAD con la riga di intestazione ed una sezione TBODY con i valori disponibili.
La prima colonna dovrà sempre essere definita come TH e contenere il valore che verrà trasportato nel campo ID mentre la seconda colonna verrà trasportata nel campo LABEL del controllo "choose".
È possibile aggiungere un numero arbitrario di colonne i cui dati verranno
resi disponibili nella callback di selezione valore.
Questo aspetto sarà approfondito in seguito.
Vediamo ora l'esempio funzionante con una sorgente dati associata.
Nazione:
$('#ck4').choose('nations.txt');È da notare che il file di sorgente dati potrebbe essere uno script che fornisce dati in modo dinamico.