Con WordPress 3.3 anche jQuery e tutti i suoi moduli sono stati allineati. Adesso infatti è possibile accedere alla nuova lista dei moduli dell’ultima release 3.3, come ad esempio l’autocomplete. Ecco uno snippet per una buona inclusione:
1 2 3 4 5 6 | // Moduli che WordPress caricherà per noi propedeutici allo script "myscript.js" $deps = array('jquery-ui-slider', 'jquery-ui-datepicker', 'jquery-ui-autocomplete' ); wp_enqueue_script('key', 'js/myscript.js', $deps, 1.3.4, true); |
Il widget calendario di jQuery UI, il cosiddetto Datepicker, permette moltissime impostazioni, tra cui quella di decidere un range di anni da mostrare nel menu a tendina.
Aprendo un dialog con jQuery UI, dove al suo interno è impostato un campo input con datepicker, quest’ultimo scompare dietro al dialog a causa di un errata impostazione dello zIndex. Per risolverlo basta inserire nell’evento open del dialog, dopo l’impostazione del nostro campo input a datapicker, le seguenti righe di codice:
Un’interessante e utile libreria Javascript basata sull’accoppiata Prototype e Scriptaculous che permette di aggiungere la funzione di DatePicker (componente presente in ActionScript/Flash) in normali INPUT TEXT HTML.
La sua caratteristica Unobtrusive (non intrusiva) lo rende uno strumento ideale per espandere le funzionalità di un sito già precostituito. Per attivare la funzione di DatePicker basta aggiungere la classe “date” nel nostro TAG INPUT. Nel codice Javascript è possibile impostare una serie di parametri tra cui il suporto per la lingua italiana.
Ecco una porzione di codice esemplificativa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="/prototype.js"></script> <script type="text/javascript" src="/scriptaculous.js"></script> <script type="text/javascript" src="/datepicker.js"></script> <style type="text/css"> @import("/css/datepicker.css"); </style> <form> <input type="text" id="date-from" name="date-from" /> </form> <script type="text/javascript"> var dpck = new DatePicker({ relative : 'date-from', language : 'en' }); </script> |
Ultimi Commenti
Giovambattista Fazioli: @ale: Come indicato @Kevin vedi sul repo di GitHub: https://github.com/gfazioli/Ch roma-Key
Giovambattista Fazioli: @Kevin: See https://github.com/gfazioli/Ch roma-Key
Kevin: Very nice example – would like to see the .fla too!
Ludovica: Ciao! Ti spiego il mio dubbio. Quando scrivo un post non inserisco immagini nell’articolo (se così...
Marco: ciao @Giovambattista Fazioli, grazie per tutte le delucidazioni di questa ottima guida. Avrei un quesito da...