Travailler avec JavaScript et jQuery (incomplet)
Date du document original en anglais : 21 Mars 2010 – 09h48 http://drupal.org/node/171213
Ce qui place ce bouton dans le pied de page :
L'utilisation de JavaScript ajoute des effets de présentation dynamiques aux thèmes. En plus des fichiers JavaScript personnalisés, beaucoup de développeurs Drupal apprécient l'utilité de jQuery. Il s'agit d'une bibliothèque JavaScript légère incorporée à Drupal. jQuery contient tout ce qui traite le DOM, les événements, les effets et les fonctions AJAX.
Drupal 6.0 à 6.2 utilisent jQuery 1.2.3. Drupal 6.3 utilise une mise à jour de jQuery 1.2.6.
Pour le développement d'un module qui a besoin de la toute dernière version de jQuery, appliquez le module jQuery update. Le fichier jquery.js est inclus automatiquement.
Dans Drupal 7, jQuery 1.8 a été ajouté au noyau (core). Vous trouverez les fichiers jQuery UI dans misc/ui et vous pourrez ajouter des fichiers javascript et CSS à vos pages à partir de là avec les fonctions drupal_add_js() et drupal_add_css(), il n'y a pas d'appels de fonctions spéciales requis.
Fichier JavaScript par défaut
Tout comme il y a un fichier style.css qui est automatiquement incorporé à votre thème, il y a un fichier nommé script.js qui est automatiquement inclus pour vous permettre d'ajouter du code JavaScript à un thème. Ce fichier doit être placé dans le dossier principal du thème. Dans Drupal 6 ce fichier était automatiquement ajouté, avec Drupal 7 le fichier doit être spécifié dans le fichier .info.
JavaScript theming
Il y a désormais un mécanisme de theming pour le code JavaScript. Travaillant de concert avec le fichier script.js automatiquement inclus (si aucun autre fichier script n'est déclaré dans .info), cela permet plus de liberté aux concepteurs de thèmes concernant la gestion des événements dans les sites Drupal. Les développeurs utilisent souvent du code JavaScript pour insérer un balisage dans une page. Toutefois, ce code peut contenir du HTML codé en dur dans le script, ce qui ne permet pas de modification du code inséré.
Les modules fournissent des fonctions de thème par défaut dans le drupal.theme.prototype.namespace. Par exemple, le code suivant utilise la fonction de thème powered (pour afficher une icône « propulsé par Drupal») :
<?phpDrupal.theme.prototype.powered = function(color, height,
width) {
return '<img src="/misc/powered-'+ color +'-'+ height +'x'+
width +.png" />";
}
?>Une méthode pour l'appeler serait :
<?php$('.footer').append(Drupal.theme('powered', 'black', 135, 42));
?>IMAGE
Le code qui suit dans un thème surcharge tout ça, par exemple en appelant un fichier situé dans un dossier de thème particulier au lieu du dossier /misc :
<?phpDrupal.theme.prototype.powered = function(color, height,
width) {
return '<img
src="/sites/all/themes/powered_images/powered-'+ color +'-'+
height +'x'+ width
+.png" />";
}
?>Cet exemple met à profit le code JavaScript pur. La fonction ci-dessus sera placée dans un fichier JavaScript du thème, ce qui vous épargne la modification des fichiers JavaScript liés aux modules.
Les fonctions JavaScript sont entièrement libres quant aux valeurs qu'elles retournent. Cela peut aller de la simple chaîne de caractères jusqu'aux types de données complexes telles que : objets, tableaux et éléments jQuery. Reportez-vous à votre fonction de thème initiale pour voir ce que votre fonction personnalisée devrait retourner.
Pour plus d'information sur l'utilisation de JavaScript et jQuery, reportez-vous à la section JavaScript du guide du développeur. Vous pouvez aussi joindre le groupe JavaScript sur Groups.Drupal.org pour trouver des conseils sur Javascript et jQuery: http://groups.drupal.org/javascript.
Reste à compléter : introduction à jQuery, comment ajouter un aggrégat (?) (patch sur http://drupal.org/node/119441) etc.
- Version imprimable
- 8229 lectures
-
Commentaires
Poster un nouveau commentaire