Quando si tratta di lavorare sullo styling delle pagine, una delle cose più “noiose” sono i forms. E quando si tratta di forms, tutti i Web Designer sanno che le select box… Sono una vera tortura.
Possiamo occuparci dello style di una select box con i CSS, ma ci sono grosse limitazioni su dove possiamo arrivare con il solo codice di stile (ma quando si occuperanno dell’aggiornamento delle specifiche di questi elementi…?).
In questi casi, l’unica soluzione a cui possiamo affidarci è l’utilizzo di codice JavaScript.

In questo articolo useremo DropKick.js per trasformare radicalmente le select box. Quello di cui si occuperà questo script sarà la trasformazione delle select box in una struttura HTML completamente personalizzabile.
Vediamo come funziona…

Impostazione base delle select box

La prima cosa da fare è realizzare la struttura base della nostra select box. Ne creeremo una di prova contenente i giorni della settimana:

[code lang=”html”]
<select id=’mySelect’>
<option value=’mon’>Monday</option>
<option value=’tue’>Tuesday</option>
<option value=’wed’>Wednesday</option>
<option value=’thu’>Thursday</option>
<option value=’fri’>Friday</option>
</select>
[/code]

Chiamare DropKick.js

Una volta impostato la select box, abbiamo bisogno di includere 3 files dentro al nostro documento: il file JavaScript di DropKick, il CSS e ovviamente, jQuery.
Sarebbe opportuno caricare il CSS nella head del nostro file e il codice JavaScript a fondo pagina dopo il footer.
Una volta fatto tutto ciò, non ci resta altro che attivare il plugin:

[code lang=”JavaScript”]
$(‘#mySelect’).dropkick();
[/code]

Trasformeremo quindi il nostro HTML in questo:

[code lang=”html”]
<div class=”dk_container dk_theme_default” id=”dk_container_undefined”>
<a class=”dk_toggle”>
<span class=”dk_label”>Thursday</span>
</a>
<div class=”dk_options”>
<ul class=”dk_options_inner”>
<li class=””>
<a data-dk-dropdown-value=”mon”>Monday</a>
</li>
<li class=””>
<a data-dk-dropdown-value=”tue”>Tuesday</a>
</li>
<li class=””>
<a data-dk-dropdown-value=”wed”>Wednesday</a>
</li>
<li class=”dk_option_current”>
<a data-dk-dropdown-value=”thu”>Thursday</a>
</li>
<li class=””>
<a data-dk-dropdown-value=”fri”>Friday</a>
</li>
</ul>
</div>
</div>
[/code]

Come potete vedere DropKick.js ha trasformato la nostra select box in qualcosa che possiamo tranquillamente modificare con i CSS. Inoltre, i valori sono stati inseriti nel nuovo attributo data HTML5 (con il nome data-dk-dropdown-value).

Ora potete customizzare la select box come volete, od usare uno dei 3 temi di default presenti con DropKick.js.

Pensiero Finale

Sono sicuro ci siano molte altre vie per modificare una select box, ma farlo senza l’utilizzo di jQuery è una sfida persa in partenza contro le incompatibilità tra browsers.
Questo plugin è di facile utilizzo e non presenta problemi di incompatibilità.

Se avete usato DropKick.js nel vostro progetto, fatemelo sapere postando qua sotto tra i commenti con il link al vostro lavoro =)

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO