Design interattivo

Come stile «Seleziona» usando DropKick

Quando si tratta di pagine Web per lo styling, nulla è tanto complicato quanto le forme. E quando si tratta di forme per lo styling - quasi - niente è tanto complicato quanto il con i CSS, ma ci sono grosse limitazioni su quanto possiamo ottenere con il solo CSS. Spesso, l'unica opzione praticabile è lo styling tramite JavaScript, e come forma di miglioramento progressivo non è qualcosa di cui abbiamo bisogno di evitarlo.

In questo articolo useremo Dropkick per creare un menu a discesa. Che dropkick fa è trasformare il

La prima cosa che dobbiamo fare è impostare a

Chiamando DropKick

Una volta che abbiamo impostato il nostro in qualcosa di cui possiamo avere fiducia nello styling con i CSS. Inoltre, i nostri valori sono stati inseriti nei nuovi attributi di dati HTML5 (con il nome data-dk-dropdown-value).

Ora possiamo personalizzare il nostro menu a discesa con i CSS, o usare uno dei temi di DropKick se preferiamo; al momento della scrittura ci sono tre temi disponibili, il default, il gloss scuro e il lucido chiaro. Ma la maggior parte delle persone vorrà usare i propri stili che soddisfano le esigenze del proprio progetto.

Estensione di DropKick

L'estensione di DropKick è un processo semplice. Ad esempio, se volessimo rilevare quando viene apportata una modifica al menu a discesa, possiamo aggiungere il gestore dell'evento di modifica, in questo modo: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Pensieri finali

Sono sicuro che ci sono mille modi per modellare un menu di selezione senza l'uso di jQuery, ma quelli che usano solo CSS stanno combattendo una battaglia persa contro i valori predefiniti del browser. La semplicità di questo plug-in e l'enorme flessibilità che offre e l'approccio di miglioramento progressivo che ne deriva significa che DropKick è una soluzione eccellente.

Hai usato DropKick in un progetto? Hai un metodo di styling preferito