Come aggiungere il plugin Jquery a Drupal?


19

Devo semplicemente incollare il codice nel file modello principale o esiste un altro modo consigliato di collegare nuovi plug-in Jquery in Drupal 7?


Che tipo di plugin JQuery stai cercando di usare e perché? Normalmente l'aggiunta di qualsiasi tipo di Javascript viene aggiunta utilizzando la funzione drupal_add_js( api.drupal.org/api/drupal/includes--common.inc/function/… ).
Jamie Hollern,

Risposte:


15

Il modo più semplice è semplicemente aggiungerlo sul file .info del tuo tema:

scripts[] = js/my_jquery_plugin.js

L'unica eccezione è se stai aggiungendo una risorsa esterna (CDN / script ospitato), nel qual caso dovresti usare drupal_add_js (), come spiegato da Jamie Hollern


1
Ma la console di Chrome mi altera:Uncaught TypeError: undefined is not a function
TangMonk,

@Alex ho una domanda stupida. So che Drupal sta usando la libreria jquery. Supponiamo che io aggiunga la funzione "torna all'inizio" usando l'idea che hai "script [] = js / back_to_top.js" in theme.info. Devo anche aggiungere il file jquery (come jquery v1.9, v1.11)?
CocoSkin,

@CocoSkin dovresti stare bene
Alex Weber,

In realtà - no. Non sempre funziona. Due esempi: 1) scripts [] = js / jquery.hoverintent.js 2) scripts [] = js / jquery.scrollme.js
sea26.2

Generalmente non è un buon modo per farlo. Come controlli su quali pagine è caricata? Usadrupal_add_library()
anthonygore il

12

Drupal ha confezionato Jquery con esso.

Per aggiungere un file js puoi usare drupal_add_js nel modo descritto in altri post.

Funzionerà in casi semplici, ma se inizi ad avere plugin che dipendono da altri plugin. potresti voler guardare le librerie api . Mi aspetto che con il tempo i moduli verranno creati per supportare le librerie più diffuse, ce ne sono alcune per JQuery integrate in system_library () .

In questo esempio per includere il modulo jQuery ui.accordion puoi usare drupal_add_library ()

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

Questo assicurerà che js sia incluso insieme al CSS e alle eventuali librerie che dipendono da esso. Si assicurerà inoltre che le librerie siano incluse solo una volta.

Se dici quale libreria stai usando, posso fornire un codice di esempio per come definirlo

Quindi prima crea un modulo per definire la libreria (chiamalo qtip) e carica il modulo in una cartella js sotto la cartella del modulo

quindi implementare 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;
}

Quindi per aggiungere il file inserisci il tuo codice

drupal_add_library('qtip', 'qtip');

Questo può essere eccessivo per una semplice libreria, ma se devi gestire un gran numero di librerie su più siti e temi, semplifica la vita.


Grazie, sto usando la libreria QTip
craigsworks.com/projects/qtip

5

Se vuoi caricare lo script solo su alcune pagine (non tutte) puoi aggiungerlo tramite il tuo file template.php. Basta aggiungere un codice simile a questo:

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

L'ho provato solo in Drupal 6.


3

Puoi aggiungere un file JavaScript al tema che usi nel sito Drupal, aggiungendo una script[] =riga nel file .info del tema che stai usando. Considererei questo caso solo se si utilizza un tema personalizzato o una versione modificata di un tema esistente che è stato rinominato; Non consiglierei di farlo se si utilizza, ad esempio, Ghirlanda. Farlo in questi casi significherebbe perdere tutte le modifiche ogni volta che il tema viene aggiornato o copiare i file del tema aggiornati e quindi riapplicare le stesse modifiche applicate alla versione precedente dei file; se la modifica aggiunge solo una script[]riga, la modifica è minima e potrebbe valerne la pena, ma significherebbe anche che i file JavaScript non vengono aggiunti nella directory contenente i file del tema, oppure è necessario aggiungere i file JavaScript ogni volta che il tema viene aggiornato.

In alternativa, è possibile creare un modulo personalizzato o aggiungere codice a un modulo personalizzato esistente che si sta già utilizzando per quel sito.
Il pro è che i file JavaScript sarebbero aggiunti a ogni tema impostato come predefinito, o tema di amministrazione, senza la necessità di cambiare tutti i temi che sono abilitati sul sito e che gli utenti possono selezionare da soli.

Come già riportato in un'altra risposta, hook_init()è l'hook che dovresti implementare. Aggiungerò che hook_library()è il nuovo hook aggiunto in Drupal 7 per i file Javascript come i plug-in jQuery.


3

Puoi usare il modulo Js Injector per aggiungere script direttamente nel pannello di amministrazione di Drupal. In alternativa puoi usare la funzione drupal_add_js () per aggiungere il tuo file js alla tua pagina.


Penso che sia esattamente quello di cui ho bisogno, sceglierò la tua risposta come migliore, ma voglio vedere se esistono altre soluzioni prima;)
Bruno Vincent,

puoi aggiungere questa riga al tuo script theme.info [] = 'percorso al tuo file' che è un metodo ma con questo metodo js verrà caricato su tutte le tue pagine che normalmente non è una buona pratica. Con i due metodi precedenti puoi aggiungere js esattamente a quelle pagine che desideri.
Shabir A.

1

È possibile creare un semplice modulo personalizzato e aggiungerlo in questo modo. Il codice sarebbe simile al seguente:

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

modulo personalizzato per l'aggiunta di JQuery? Sul serio?
Vonder,

solo se è esterno, vedi la mia risposta
Alex Weber,

1

Puoi semplicemente usarlo YOURTHEME_preprocess_theme()se vuoi applicare la condizione logica:

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

e aggiungi anche nel tuo file yourtheme.info:

scripts[] = js/yourplugin.js


1

Se stai utilizzando il modulo Context, installa Context Aggiungi risorse. Imposta un contesto globale o un contesto specifico e aggiungi una nuova reazione per aggiungere l'asset JS per percorso o modulo.

Nessuna codifica richiesta.


Grazie! Ciò ha il vantaggio di poter limitare le librerie a percorsi specifici, ma non è richiesta alcuna codifica.
Druvision,

1
Ma per i plugin jQuery come textext.js che includono in media 5 file CSS e 5 file JS, c'è ancora molto lavoro da fare.
Druvision,

1

Esistono molte librerie esterne che devono essere incluse al giorno d'oggi.

Metterli tutti nella directory js del tema non è sempre desiderabile poiché a volte quelle librerie sono composte da più file js e più file css.

Ho finito per usare la libraries_get_pathfunzione del modulo libraries per prendere i loro percorsi dalla directory sites / all / libraries:

Ecco come ho aggiunto i file selezionati relativi a 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");
  }

} ?>

Mi piacerebbe sapere se esiste un repository esterno in cui tutte quelle librerie sono predefinite, quindi non dovrò definirle manualmente.


Come si aggiungono pagine in esso?
Umair,


0

questo è ciò che ha funzionato per me, non è necessario creare un modulo per un plugin jQuery o installarne uno - nel mio template.php ho aggiunto:

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

}

-4

un altro modo è quello di aggiungere il seguente codice al file
page.tpl.php drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');


4
L'aggiunta di codice direttamente ai modelli è considerata una cattiva pratica.
mpdonadio

"L'aggiunta di codice direttamente ai modelli è considerata una cattiva pratica" ... quindi il modulo iniettore SQL è la migliore pratica allora?
Bruno Vincent,

Molti degli altri modi citati potrebbero essere considerati una buona pratica @BrunoVincent, dipende dal livello su cui vuoi attaccarlo (codice in un tema, codice in un modulo personalizzato o semplicemente installare un modulo come js injector)
Clive

in alcuni casi è utile fare così, ad esempio se vuoi aggiungere un file javascript conditionnaly
houmem
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.