Comment ajouter le plugin Jquery à Drupal?

Dois-je simplement coller le code dans le fichier de modèle principal, ou existe-t-il un autre moyen recommandé d'attacher de nouveaux plugins Jquery dans Drupal 7?

Le moyen le plus simple consiste simplement à l'ajouter au fichier .info de votre thème:

scripts[] = js/my_jquery_plugin.js

La seule exception est si vous ajoutez une ressource externe (CDN / script hébergé), auquel cas vous devez utiliser drupal_add_js (), comme expliqué par Jamie Hollern

Drupal a fourni Jquery avec.

Pour ajouter un fichier js, vous pouvez utiliser drupal_add_js de la manière décrite dans d'autres articles.

Cela fonctionnera dans des cas simples, mais si vous commencez à avoir des plugins qui dépendent d'autres plugins. vous voudrez peut-être regarder l' api des bibliothèques . Je m'attends à ce que des modules soient créés pour prendre en charge les bibliothèques populaires, il y en a pour l' interface utilisateur JQuery intégrée, voir system_library () .

Dans cet exemple, pour inclure le module jQuery ui.accordion, vous pouvez utiliser drupal_add_library ()

drupal_add_library('system', 'ui.accordion');

Cela garantira que le js est inclus avec le CSS et toutes les bibliothèques qui en dépendent. Il s'assurera également que les bibliothèques ne sont incluses qu'une seule fois.

Si vous dites quelle bibliothèque vous utilisez, je peux fournir un exemple de code pour savoir comment le définir

Donc, créez d'abord un module pour définir la bibliothèque (appelez-le qtip) et téléchargez le module dans un dossier js sous le dossier du module

puis implémentez hook_library ()

function qtip_library() (
 $libraries['qTip'] = array(
    'title' => 'qTip', 
    'website' => 'http://craigsworks.com/projects/qtip/docs/', 
    'version' => '1.0.0-rc3', 
    'js' => array(
      drupal_get_path('module', 'qtip') . '/js/jquery.qtip-1.0.0.min.js' => array(),
    ),
    'dependencies' => array(
      array('system', 'jquery'),
    ),
  );
  return $libraries;
}

Ensuite, pour ajouter le fichier mis dans votre code

drupal_add_library('qtip', 'qtip');

Cela peut être exagéré pour une bibliothèque simple, mais si vous devez gérer un grand nombre de bibliothèques sur plusieurs sites et thèmes, cela vous facilite la vie.

Si vous souhaitez charger le script uniquement sur certaines pages (pas toutes), vous pouvez l'ajouter via votre fichier template.php. Ajoutez simplement un code similaire à celui-ci:

function YourTheme_preprocess_node(&$variables) {

 $node = $variables['node'];
if (!empty($node) && ($node->nid == 983)
 // here you can esily add more pages
) {

drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.core.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/jquery-ui-1.7.3.custom.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.progressbar.js');

drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.progressbar.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.core.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.theme.css');
 }
}

Je n'ai testé cela que dans Drupal 6.

Vous pouvez ajouter un fichier JavaScript au thème que vous utilisez dans le site Drupal, en ajoutant une script[] =ligne dans le fichier .info du thème que vous utilisez. Je considérerais ce cas uniquement si vous utilisez un thème personnalisé ou une version modifiée d'un thème existant qui a été renommé; Je ne suggérerais pas de le faire si vous utilisez, par exemple, Garland. Le faire dans de tels cas signifierait perdre toutes les modifications à chaque mise à jour du thème, ou copier les fichiers de thème mis à jour, puis réappliquer les mêmes modifications appliquées à la version précédente des fichiers; si le changement n'ajoute qu'une script[]ligne, alors le changement est minime, et cela pourrait valoir la peine, mais cela signifierait également que les fichiers JavaScript ne sont pas ajoutés dans le répertoire contenant les fichiers de thème, ou vous devez ajouter les fichiers JavaScript tous les heure à laquelle le thème est mis à jour.

Vous pouvez également créer un module personnalisé ou ajouter du code à un module personnalisé existant que vous utilisez déjà pour ce site.
Le pro est que les fichiers JavaScript seraient ajoutés à chaque thème est défini par défaut, ou thème d'administration, sans qu'il soit nécessaire de modifier tous les thèmes activés sur le site, et que les utilisateurs peuvent sélectionner eux-mêmes.

Comme déjà signalé dans une autre réponse, hook_init()c'est le crochet que vous devez implémenter. J'ajouterai que hook_library()c'est le nouveau crochet ajouté dans Drupal 7 pour les fichiers Javascript comme les plug-ins jQuery.

Vous pouvez utiliser le module Js Injector pour ajouter des scripts directement dans le panneau d'administration Drupal. Alternativement, vous pouvez utiliser la fonction drupal_add_js () pour ajouter votre fichier js à votre page.

Vous pouvez créer un module personnalisé simple et l'ajouter de cette façon. Le code serait semblable au suivant:

MYMODULE_init() {
  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/FILE.js');
}

Vous pouvez simplement utiliser dans YOURTHEME_preprocess_theme()si vous souhaitez appliquer une condition logique:

drupal_add_js(drupal_get_path('theme','your_theme').'/js/yourplugin.js');

et ajoutez également dans le fichier yourtheme.info:

scripts[] = js/yourplugin.js

Si vous utilisez le module Context, installez Context Add Assets. Configurez un contexte global ou un contexte spécifique et ajoutez une nouvelle réaction pour ajouter l'actif JS par chemin ou par module.

Aucun codage requis.

Il existe de nombreuses bibliothèques externes qui doivent être incluses de nos jours.

Les placer tous dans le répertoire js du thème n'est pas toujours souhaitable car parfois ces bibliothèques sont composées de plusieurs fichiers js et de plusieurs fichiers css.

J'ai fini par utiliser la libraries_get_pathfonction du module de bibliothèques pour prendre leurs chemins depuis le répertoire sites / all / bibliothèques:

Voici comment j'ai ajouté des fichiers sélectionnés liés à textext.js:

<?php 
function MYMODULE_init() {

  // Add jQuery library to a specific page.
  if (arg(0) == 'messages' && arg(1) == 'new') {
    // Add the jQuery TextExt library ( http://textextjs.com/ )
    $libdir = libraries_get_path('jquery-textext');
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.plugin.tags.js");
    drupal_add_js("$libdir/src/js/textext.plugin.autocomplete.js");
    drupal_add_js("$libdir/src/js/textext.plugin.suggestions.js");
    drupal_add_js("$libdir/src/js/textext.plugin.filter.js");
    drupal_add_js("$libdir/src/js/textext.plugin.focus.js");
    drupal_add_js("$libdir/src/js/textext.plugin.prompt.js");
    drupal_add_js("$libdir/src/js/textext.plugin.ajax.js");
    drupal_add_js("$libdir/src/js/textext.plugin.arrow.js");

    drupal_add_css("$libdir/src/css/textext.core.css");
    drupal_add_css("$libdir/src/css/textext.plugin.tags.css");
    drupal_add_css("$libdir/src/css/textext.plugin.autocomplete.css");
    drupal_add_css("$libdir/src/css/textext.plugin.focus.css");
    drupal_add_css("$libdir/src/css/textext.plugin.prompt.css");
    drupal_add_css("$libdir/src/css/textext.plugin.arrow.css");
  }

} ?>

J'aimerais savoir s'il existe un référentiel externe dans lequel toutes ces bibliothèques sont prédéfinies, je n'aurai donc pas à les définir chacune manuellement.

Je vous recommande de charger jQuery à partir du pupille Google CDN. Consultez ce lien pour plus d'informations: http://code.google.com/apis/libraries/devguide.html#jquery . Assurez-vous de ne pas charger le même script plusieurs fois dans votre site.

c'est ce qui a fonctionné pour moi, pas besoin de créer un module pour un plugin jQuery ou d'en installer un - dans mon template.php j'ai ajouté:

function YOURTHEME_js_alter(&$javascript){
    // overwriting for newer jQuery version
    $javascript['misc/jquery.js']['data'] = path_to_theme() . '/assets/js/jquery-1.9.0.js';
    // also the min...
    $javascript['misc/ui/jquery.ui.core.min.js']['data'] = path_to_theme() . '/assets/js/jquery-ui-1.10.0.custom.min.js';
    // here I add the library (jQuery plugin) to resolve an error -> $.browser.msie undefined
    $javascript[path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js'] = array(   
        "group" => -100,
        "weight" => -18.990,
        "version" => "1.1.0",
        "every_page" => true,
        "type" =>   "file",
        "scope" => "header",
        "cache" => true,
        "defer" => false,
        "preprocess" => true,
        "data" =>  path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js',
    );

}

une autre façon consiste à ajouter le code suivant au fichier
page.tpl.php drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');