Animazione jquery in Drupal
Ciao a tutti,
devo porVi una domanda che mi stà un pò facendo girare, io ho iniziato ad usare drupal da qualche mese, tra esercitazioni fatte e lavoro, stò venendo a conoscenza di un sacco di nozioni e mi accorgo che drupal è proprio funzionale e mi piace parecchio......
io prima che iniziassi a usare drupal, ho sempre lavorato utilizzando html/css e un pò di jquery, il giusto per riutilizzare menù, gallery ed effetti e modificarli a mio piacimento con l'obiettivo di crescere in questo campo, ma ora ho avuto un pò di difficoltà nell'inserire jquery nelle mie pagine su drupal,
ho provato diversi metodi per inserire il javascript ma con scarsi risultati, non riesco a capire.
Vi illustro come opero per inserire un effetto animazione del menù, cercherò di essere coinciso per far capire i miei passaggi e anche per far capire a chi si a stà iniziando un approccio con il jquery..
Nel sito in costruzione:
1) ho caricato il modulo update jquery
2) ho inserito l'html della prova del menu in un articolo
3) a fondo pagina dell'articolo ho inserito
-la funzione del JS <script type="text/javascript"> ecc </style>
-<style type="text/css"> @import url("#percorso_del_css");</style>
4) Inserito i JS prima su template.php con:
function example_preprocess_html (&$vars) {
$options = array(
'group' => magazeen_lite ,
);
drupal_add_js ( drupal_get_path ( 'magazeen_lite(tema)' , 'js' ). '/modernizr.custom.63321.js' , '/jquery.dropdown.js' , $options );
}
drupal_add_library ( 'system' , 'ui.autocomplete' ); ***/
e anche nel theme.info ma con scarsi risultati in questa maniera:
scripts[] = js/magazeenlite(tema).js
scripts[] = js/modernizr.custom.63321.js
scripts[] = js/jquery.dropdown.js
ogni volta che ho provato ad inserire un javascript cancellavo la cache sia da drupal che dal browser ma niente il mio articolo con all'interno il menù animato non funziona.... testate contro il muro!!
questa prova l'ho fatta all'interno del body di un articolo, c'è qualcosa da correggere o mi sono dimenticato qualche passaggio?
l'animazione jquery è questa http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/
poi volendo si può fare un menù gestito da drupal con le stesse animazioni? bisogna creare un modulo? se si... avete qualche guida che spiega come implementare l'animazione javascript in un modulo?
grazie a tutti per le future risposte....
di sicuro risolvendo questo, potremmo aiutare altre persone.
Risposte
Segui questi passaggi. Ho
Segui questi passaggi.
Ho creato questa struttura dentro il tema che uso è la seguente (i file sono presi dal pacchetto che c'è sul sito di riferimento, queste impostazioni sono relative alla demo1)
custom/fonts (directory)
custom/common.css
custom/demo.css
custom/icons.css
custom/jquery.dropdown.js
custom/modernizr.custom.63321.js
custom/style1.css
dentro il mio template.php ho creato la funzione (supponiamo di caricare i file solo nella home)
function [nome-tema]_preprocess_html(&$vars) {
if (drupal_is_front_page()) {
drupal_add_js(path_to_theme() . '/custom/jquery.dropdown.js');
drupal_add_js(path_to_theme() . '/custom/modernizr.custom.63321.js');
drupal_add_css(path_to_theme() . '/custom/style1.css');
drupal_add_js("jQuery(document).ready(function($){ $( '#cd-dropdown' ).dropdown( { gutter : 5 } ); });", array('type' => 'inline', 'scope' => 'header'));
}
}
nel body del nodo che uso come home page ho inserito lo snippet
<div>
<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose your favorite animal</option>
<option value="1" class="icon-monkey">Monkey</option>
<option value="2" class="icon-bear">Bear</option>
<option value="3" class="icon-squirrel">Squirrel</option>
<option value="4" class="icon-elephant">Elephant</option>
</select>
</div>
e ho salvato in formato FUll HTML.
Se tutto è andato per il verso giusto dovresti vedere il dropdown.
Utilizzando una libreria jquery ad hoc e aggiustando il codice del tema credo sia possibile ottenere qualche effetto simile anche per un menù.
Spero ti sia utile come punto di partenza!
EDIT: è necessario installare il modulo jquery_update e selezionare la versione della libreria 1.8 (admin/config/development/jquery_update), le librerie esterne aggiunte lo richiedono.
grazie sei un grande!....
grazie sei un grande!.... adesso provo!