Video: Khan Academy and Code.org | Hardware and Software 2024
Tutti i widget dell'interfaccia utente jQuery si prestano alla personalizzazione CSS3. La maggior parte delle modifiche che gestisci utilizzano correttamente le funzionalità integrate. Puoi anche lavorare con il CSS utilizzato da jQuery UI per formattare i widget per produrre effetti speciali.
Naturalmente, se non altro, puoi sempre usare JavaScript per modificare il comportamento reale del widget secondo necessità. Il punto è che puoi cambiare i widget (come lo Spinner) per soddisfare esigenze specifiche senza dover reinventare la ruota. Le modifiche sono generalmente brevi e facili da fare, il che significa che non devi ricominciare da zero con un'idea che devi codificare a mano.
I filatori sono popolari perché puoi usarli per controllare l'input dell'utente in vari modi. L'idea è di fornire il controllo per i dati che sono normalmente variabili, quindi non è possibile utilizzare qualcosa come una casella di riepilogo a discesa. Uno degli usi più interessanti dei filatori è mostrato sul sito Ben Knows Code.
In questo caso, l'autore mostra come eseguire attività come spostare la posizione delle frecce e creare uno spinner alfabetico. L'esempio qui utilizzato riproduce l'esempio su questo sito, ma è un po 'più semplice e facile da capire. Una volta compreso questo esempio, puoi visitare il sito Ben Knows Code e capire subito questo esempio.
Gli spinners normalmente gestiscono input numerici. Tuttavia, potresti avere bisogno di un input alfabetico. Per creare un input alfabetico, è necessario dare l'aspetto delle lettere senza utilizzare effettivamente le lettere, perché il widget Spinner funziona solo con i numeri. L'esempio seguente prende un widget jQuery UI Spinner standard e lo trasforma per utilizzare lettere anziché numeri.
$ (function () {var CurrentValue = 65; var ThisSpinner = $ ("# Spinner"). Spinner ({// Imposta il minimo al codice per A // e il massimo al codice per Z. min: 65, max: 90, // Quando l'utente inizia a girare lo spinner, // converte il valore in un numero e nasconde il // testo dalla vista start: function (ui, event) {ThisSpinner. Spinner ("value ", CurrentValue); $ (" # Spinner "). Css (" color "," transparent ");}, // Quando l'utente interrompe la rotazione dello spinner, // salva il valore numerico, convertilo in una // lettera e visualizza il testo sullo schermo stop: function (ui, event) {CurrentValue = ThisSpinner. spinner ("value"); ThisSpinner. spinner ("value", String. fromCharCode (CurrentValue)); $ ("# Spinner"). css ("color", "green");}});});
Il codice inizia creando una variabile, CurrentValue, che tiene traccia del valore numerico dello spinner.Il valore, 65, è l'equivalente numerico della lettera A. Quindi lo spinner inizia con un valore di A, ma memorizza questo valore come numero 65.
La creazione dello spinner, ThisSpinner, viene dopo. È necessario impostare i valori minimo e massimo che riflettono i valori numerici di A e Z. Questa stessa tecnica può funzionare per qualsiasi serie di lettere. Puoi anche usare facilmente lettere minuscole, se lo desideri. Del resto, qualsiasi serie funzionerà, compresi i caratteri speciali. È persino possibile utilizzare questo approccio per i valori enumerati.
L'approccio più semplice fornisce ai gestori gli eventi di inizio e fine. Quando l'utente fa clic su una delle due frecce, inizia un evento di rotazione. Il cambiamento si verifica e quindi la rotazione si interrompe. Perché lo spinner funzioni correttamente, l'attributo value deve contenere un valore numerico.
Il codice imposta il valore su CurrentValue, che è il codice che equivale alla lettera attualmente selezionata. Tuttavia, a questo punto, puoi vedere il valore numerico come testo nella casella di selezione, che distrae. Per evitare che ciò accada, il gestore eventi imposta anche il colore del testo in modo trasparente, in modo che l'utente non possa effettivamente vedere il testo sullo schermo.
Assicurati di pensare a come impostare i colori per gli oggetti nascosti. C'è una tendenza con alcuni sviluppatori a impostare il colore dell'oggetto nascosto sul colore di sfondo, ma il colore di sfondo può cambiare. Anche se molti riferimenti in realtà non lo dichiarano, uno dei colori riconosciuti è trasparente, il che significa che nessun colore. Usa sempre oggetti trasparenti quando vuoi nascondere qualcosa.
Il gestore dell'evento di arresto memorizza il nuovo valore dello spinner in CurrentValue. Quindi converte il valore numerico da un numero, ad esempio 65, a una lettera, ad esempio A. Il codice cambia il colore del testo in verde in modo che l'utente possa vedere la lettera sullo schermo.
Questo esempio cambia anche alcuni degli stili del widget. Questi stili sono elencati come parte del file CSS dell'interfaccia utente jQuery. In questo caso, non si desidera che l'utente possa digitare più di un carattere, pertanto la larghezza del widget viene modificata in modo da accettare solo una lettera. Inoltre, il colore del testo diventa verde, come mostrato qui:
. ui-spinner {width: 45px;}. ui-spinner-input {color: green;}
Usando una combinazione di eventi e CSS puoi creare tutti i tipi di effetti personalizzati con qualsiasi dei widget dell'interfaccia utente jQuery. Tutto quello che devi fare è sperimentare un po 'per creare un risultato davvero interessante.
