Come aggiungere un file .js o qualche riga di codice javascript al tuo sito sviluppato con Drupal 7: a una singola pagina, su tutto il sito, al tema, a un modulo, o usando le API di Drupal 7.
Semplice guida in italiano.
- Come aggiungere un file javascript in tutto il sito: tema o modulo
- Come aggiungere javascript con php e le api di Drupal
- Come allegare un file javascript a un form
Come aggiungere un file javascript in tutto il sito: tema o modulo
Per includere un file .js in tutto il sito si deve modificare il file .info del tema o del modulo che ne farà uso.
Aggiungere un file .js al tema
Individuare e aprire il file NomeTema.info nella cartella che contiene i files del tema.
Per ogni file da allegare, inserire una riga tipo:
scripts[] = js/MioFile.js
Il path indicato è relativo alla cartella del tema.
Aggiungere un file .js al modulo (Drupal 7)
Individuare e aprire il file NomeModulo.info nella cartella che contiene i files del modulo.
Per ogni file da allegare, inserire una riga come sopra: scripts[] = js/MioFile.js
Questo sistema funziona solo con files presenti sul server. Per includere files esterni bisogna usare drupal_add_js().
Come aggiungere javascript con php e le api di Drupal
Per aggiungere un file .js o una porzione di codice javascript in una pagina php o all'interno di un modulo (vedi anche come creare un modulo) si può usare la funzione:
drupal_add_js($data = NULL, $options = NULL)
| $data | può essere il path di un file .js oppure del codice javascript |
| $options | può essere una stringa che indica il tipo di inclusione (‘file’, ‘inline’, ‘external’, ‘setting’) oppure un array associativo contenente ulteriori istruzioni su come includere il nostro javascript. |
Vediamo i modi più semplici per usare l’API di Drupal: drupal_add_js().
Includere un file .js
Per includere un file javascript basta inserire il path del file, relativo a base_path(), come unico argomento, oppure specificando ‘file’ come secondo argomento.
Esempio:
drupal_add_js('misc/MioFile.js');
// oppure
drupal_add_js('misc/MioFile.js', 'file');
In qualsiasi riga di codice php venga chiamata questa funzione, Drupal includerà automaticamente il nostro javascript nella pagina HTML, a meno che non venga indicato diversamente tramite l’opzione ‘scope’.
Includere una porzione di codice “inline”
Per aggiungere codice javascript basta passare una stringa contenente il codice js e l’opzione ‘inline’.
Esempio:
$str = 'jQuery(document).ready(function () { alert("Hello!"); });';
drupal_add_js($str, 'inline');
// oppure, per specificare altre opzioni:
drupal_add_js($str,
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);auto
Includere un file javascript da un altro server
Se il file da includere non risiede sullo stesso server del sito si può usare l’opzione ‘external’ e indicare l’url del file.
Esempio:
drupal_add_js('http://example.com/example.js', 'external');
Ci sono diverse opzioni e modi di usare la funzione drupal_add_js(), vedi la documentazione completa sul sito ufficiale (in inglese).
Come allegare un file javascript a un form
Per includere un file .js a un form, ad esempio per aggiungere dei controlli javascript in fase di inserimento dati, si deve modificare l’oggetto $form (vedi come modificare un form).
In particolare l’attributo #attached permette di caricare files e librerie passando un array contenente le informazioni sui files da inserire.
Esempi:
$filepath = drupal_get_path('module', 'MioModulo').'/esempio.js';
$form['#attached']['js'] = array($filepath);
Includere un file esterno:
$form['#attached']['js'] = array(
'http://code.jquery.com/jquery-1.4.2.min.js' => array( 'type' => 'external' )
);
Includere una porzione di codice:
$str = 'jQuery(document).ready(function () { alert("Hello!"); });';
$form['#attached']['js'][] = array( 'data' => $str, 'type' => 'inline', )
Si può fare la stessa cosa con un file CSS.
$filepath = drupal_get_path('module', 'MioModulo').'/css/esempio.css';
$form['#attached']['css'] = array($filepath);