web-dev-qa-db-fra.com

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?

javascript
18
Vonder

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

15
Alex Weber

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 le bibliothèques api . 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 la 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.

12
Jeremy French

Si vous ne souhaitez charger le script que 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 qu'en Drupal 6.

5
Nebojsa

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

3
Shabir A.

Vous pouvez ajouter un fichier JavaScript au thème que vous utilisez dans le site Drupal, en ajoutant une ligne script[] = 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 fois que le thème est mis à jour, ou pour copier les fichiers de thème mis à jour, puis réappliquez les mêmes modifications appliquées à la version précédente des fichiers; si la modification n'ajoute qu'une ligne script[], 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 à chaque mise à jour du thème.

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 comme thème par défaut, ou d'administration, sans avoir besoin de changer 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() est le hook que vous devez implémenter. J'ajouterai que hook_library() est le nouveau hook ajouté dans Drupal 7 pour les fichiers Javascript comme les plug-ins jQuery.

3
kiamlaluno

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');
}
1
Jamie Hollern

Vous pouvez simplement utiliser dans YOURTHEME_preprocess_theme() si vous voulez 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

1
gbwebservice

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.

1
ebeyrent

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 le libraries_get_path fonction du module des bibliothèques pour emprunter 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 manuellement chacune.

1
Druvision

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',
    );

}
0
David Moldenhauer

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 .

0
ANDiTKO