Comment ajouter le plugin Jquery à Drupal?

19

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?

Vonder
la source
Quel type de plugin JQuery cherchez-vous à utiliser et pourquoi? Normalement, l'ajout de tout type de Javascript est ajouté à l'aide de la fonction drupal_add_js( api.drupal.org/api/drupal/includes--common.inc/function/… ).
Jamie Hollern

Réponses:

15

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

Alex Weber
la source
1
Mais la console chromée me modifie:Uncaught TypeError: undefined is not a function
TangMonk
@Alex, j'ai une question stupide. Je sais que Drupal utilise la bibliothèque jquery. Disons que j'ajoute la fonction "haut de page" en utilisant l'idée que vous avez "scripts [] = js / back_to_top.js" dans theme.info. Dois-je également ajouter le fichier jquery (comme jquery v1.9, v1.11)?
CocoSkin
@CocoSkin ça devrait aller
Alex Weber
En fait non. Cela ne fonctionne pas toujours. Deux exemples: 1) scripts [] = js / jquery.hoverintent.js 2) scripts [] = js / jquery.scrollme.js
sea26.2
Ce n'est généralement pas un bon moyen de le faire. Comment contrôlez-vous les pages sur lesquelles il est chargé? Utilisationdrupal_add_library()
anthonygore
12

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.

Jeremy French
la source
Merci, j'utilise la bibliothèque QTip
craigsworks.com/projects/qtip
5

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.

Nebojsa
la source
3

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.

kiamlaluno
la source
3

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.

Shabir A.
la source
Je pense que c'est exactement ce dont j'ai besoin, je choisirai votre réponse au mieux, mais je veux voir si d'autres solutions existent d'abord;)
Bruno Vincent
vous pouvez ajouter cette ligne à votre script theme.info [] = 'chemin vers votre fichier' qui est une méthode mais avec cette méthode, le js sera chargé sur toutes vos pages, ce qui n'est normalement pas une bonne pratique. Avec les deux méthodes ci-dessus, vous pouvez ajouter les js sur exactement les pages que vous souhaitez.
Shabir A.
1

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');
}
Jamie Hollern
la source
module personnalisé pour ajouter JQuery? Sérieusement?
Vonder le
seulement si elle est externe, voir ma réponse
Alex Weber
1

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

gbwebservice
la source
1

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.

ebeyrent
la source
Merci! Cela a l'avantage de pouvoir limiter les bibliothèques à des chemins spécifiques, mais aucun codage n'est requis.
Druvision
1
Mais pour les plugins jQuery comme textext.js qui incluent en moyenne 5 fichiers CSS et 5 JS, cela demande encore beaucoup de travail.
Druvision
1

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.

Druvision
la source
Comment y ajoutez-vous des pages?
Umair
0

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

}
David Moldenhauer
la source
-4

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

houmem
la source
4
L'ajout de code directement aux modèles est considéré comme une mauvaise pratique.
mpdonadio
"L'ajout de code directement aux modèles est considéré comme une mauvaise pratique" ... donc le module injecteur SQL est la meilleure pratique alors?
Bruno Vincent
Un certain nombre d'autres moyens mentionnés pourraient être considérés comme une bonne pratique @BrunoVincent, cela dépend du niveau sur lequel vous voulez attaquer cela (code dans un thème, code dans un module personnalisé, ou simplement installer un module comme js injector)
Clive
il est dans certains cas utile de faire comme ça, par exemple vous voulez ajouter un fichier javascript conditionnellement
houmem