it-swarm.it

Come aggiungere il plugin Jquery a Drupal?

Devo semplicemente incollare il codice nel file modello principale, o c'è qualche altro modo consigliato di collegare nuovi plugin Jquery in Drupal 7?

18
Vonder

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

15
Alex Weber

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 librerie api . Mi aspetto che nel tempo verranno creati moduli per supportare le librerie più diffuse, ce ne sono alcuni per JQuery integrati in vedi 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.

12
Jeremy French

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

Ho provato questo solo in Drupal 6.

5
Nebojsa

Puoi usare Js Injector modulo per aggiungere script direttamente in Drupal. In alternativa puoi usare drupal_add_js () per aggiungere il tuo js file alla tua pagina.

3
Shabir A.

Puoi aggiungere un file JavaScript al tema che usi nel sito Drupal, aggiungendo una riga script[] = Nel file .info del tema che stai usando. questo caso solo se stai usando un tema personalizzato o una versione modificata di un tema esistente che è stato rinominato; non suggerirei di farlo se stai usando, ad esempio, Ghirlanda. Farlo in questi casi significherebbe perdere tutte le modifiche tutte le volte che il tema viene aggiornato o per copiare i file del tema aggiornati, quindi riapplicare le stesse modifiche applicate alla versione precedente dei file; se la modifica aggiunge solo una riga script[], quindi 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 che verranno aggiunti a ogni tema sono impostati come predefiniti, o temi 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
kiamlaluno

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

Puoi semplicemente usare in 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
gbwebservice

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 per modulo.

Nessuna codifica richiesta.

1
ebeyrent

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 il libraries_get_path funzione del modulo librerie 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.

1
Druvision

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

}
0

Ti consiglio di caricare jQuery dal pupblic Google CDN. Controlla questo link per ulteriori informazioni: http://code.google.com/apis/libraries/devguide.html#jquery . Basta assicurarsi di non caricare lo stesso script più volte nel tuo sito .

0
ANDiTKO