¿Cómo agregar el complemento Jquery a Drupal?


19

¿Debo pegar el código en el archivo de plantilla principal, o hay alguna otra forma recomendada de adjuntar nuevos complementos de Jquery en Drupal 7?


¿Qué tipo de complemento JQuery estás buscando usar y por qué? Normalmente, se agrega cualquier tipo de Javascript utilizando la función drupal_add_js( api.drupal.org/api/drupal/includes--common.inc/function/… ).
Jamie Hollern

Respuestas:


15

La forma más fácil es agregarlo al archivo .info de su tema:

scripts[] = js/my_jquery_plugin.js

La única excepción es si está agregando un recurso externo (CDN / script alojado), en cuyo caso debe usar drupal_add_js (), como lo explicó Jamie Hollern


1
Pero la consola de Chrome me alteró:Uncaught TypeError: undefined is not a function
TangMonk

@ Alex, tengo una pregunta tonta. Sé que Drupal está usando la biblioteca jquery. Digamos que estoy agregando la función "volver arriba" al usar la idea que tiene "scripts [] = js / back_to_top.js" en theme.info. ¿También necesito agregar el archivo jquery (como jquery v1.9, v1.11)?
CocoSkin

@CocoSkin deberías estar bien
Alex Weber

En realidad no. Eso no siempre funciona. Dos ejemplos: 1) scripts [] = js / jquery.hoverintent.js 2) scripts [] = js / jquery.scrollme.js
sea26.2

Generalmente no es una buena manera de hacerlo. ¿Cómo controlas en qué páginas se carga? Usodrupal_add_library()
anthonygore el

12

Drupal tiene a Jquery empaquetado con él.

Para agregar un archivo js puede usar drupal_add_js de la manera descrita en otras publicaciones.

Esto funcionará en casos simples, pero si comienza a tener complementos que dependen de otros complementos. es posible que desee ver la API de las bibliotecas . Espero que a tiempo se creen módulos para admitir bibliotecas populares, hay algunos para JQuery ui integrados en see system_library () .

En este ejemplo, para incluir el módulo jQuery ui.accordion, puede usar drupal_add_library ()

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

Esto asegurará que el js se incluya junto con el CSS y las bibliotecas que dependen de él. También se asegurará de que las bibliotecas solo se incluyan una vez.

Si dice qué biblioteca está utilizando, puedo proporcionar un código de muestra para definirlo.

Primero cree un módulo para definir la biblioteca (llámelo qtip) y cargue el módulo en una carpeta js debajo de la carpeta del módulo

luego implemente 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;
}

Luego para agregar el archivo puesto en su código

drupal_add_library('qtip', 'qtip');

Esto puede ser excesivo para una biblioteca simple, pero si tiene que administrar una gran cantidad de bibliotecas en múltiples sitios y temas, hace la vida mucho más fácil.


Gracias, estoy usando la biblioteca QTip
Vonder

5

Si desea cargar el script solo en algunas páginas (no en todas), puede agregarlo a través de su archivo template.php. Simplemente agregue un código similar a este:

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

Solo probé esto en Drupal 6.


3

Puede agregar un archivo JavaScript al tema que usa en el sitio de Drupal, agregando una script[] =línea en el archivo .info del tema que está usando. Consideraría este caso solo si está utilizando un tema personalizado o una versión modificada de un tema existente que ha cambiado de nombre; No sugeriría hacerlo si está utilizando, por ejemplo, Garland. Hacerlo en tales casos significaría perder todos los cambios cada vez que se actualiza el tema, o copiar los archivos de tema actualizados y luego volver a aplicar los mismos cambios aplicados a la versión anterior de los archivos; si el cambio solo agrega una script[]línea, entonces el cambio es mínimo, y podría valer la pena hacerlo, pero también significaría que los archivos JavaScript no se agregan en el directorio que contiene los archivos de tema, o debe agregar los archivos JavaScript cada vez que se actualiza el tema.

Como alternativa, puede crear un módulo personalizado o agregar código a un módulo personalizado existente que ya está utilizando para ese sitio.
La ventaja es que los archivos JavaScript se agregarían a cada tema configurado como predeterminado, o el tema de administración, sin la necesidad de cambiar todos los temas que están habilitados en el sitio, y que los usuarios pueden seleccionar por sí mismos.

Como ya se informó en otra respuesta, hook_init()es el gancho que debe implementar. Agregaré que hook_library()es el nuevo gancho agregado en Drupal 7 para archivos Javascript como los complementos jQuery.


3

Puede usar el módulo Js Injector para agregar scripts directamente en el panel de administración de Drupal. Alternativamente, puede usar la función drupal_add_js () para agregar su archivo js a su página.


Creo que esto es exactamente lo que necesito, elegiré su respuesta como mejor, pero quiero ver si existen otras soluciones primero;)
Bruno Vincent

puede agregar esta línea a su script theme.info [] = 'ruta a su archivo', que es un método, pero con este método se cargará js en todas sus páginas, lo que normalmente no es una buena práctica. Con los dos métodos anteriores, puede agregar el js exactamente en las páginas que desee.
Shabir A.

1

Puede crear un módulo personalizado simple y agregarlo de esa manera. El código sería similar al siguiente:

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

módulo personalizado para agregar JQuery? ¿Seriamente?
Vonder

solo si es externo, mira mi respuesta
Alex Weber

1

Simplemente puede usar in YOURTHEME_preprocess_theme()si desea aplicar la condición lógica:

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

y agregue también en el archivo yourtheme.info:

scripts[] = js/yourplugin.js


1

Si está utilizando el módulo Context, instale Context Add Assets. Configure un contexto global, o un contexto específico, y agregue una nueva reacción para agregar el activo JS por ruta o por módulo.

No se requiere codificación.


¡Gracias! Esto tiene la ventaja de que puede limitar las bibliotecas a rutas específicas, sin embargo, no se requiere codificación.
Druvision el

1
Pero para los complementos de jQuery como textext.js que incluyen 5 archivos CSS y 5 JS en promedio, todavía es mucho trabajo.
Druvision el

1

Hay muchas bibliotecas externas que deben incluirse hoy en día.

Ponerlos todos en el directorio js del tema no siempre es deseable ya que a veces esas bibliotecas están compuestas por múltiples archivos js y múltiples archivos css.

Terminé usando la libraries_get_pathfunción del módulo de bibliotecas para tomar sus rutas desde el directorio sites / all / library:

Así es como agregué los archivos seleccionados que se relacionan con 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");
  }

} ?>

Me encantaría saber si hay un repositorio externo en el que todas esas bibliotecas están predefinidas, por lo que no tendré que definirlas manualmente.


¿Cómo se agregan páginas?
Umair


0

esto es lo que funcionó para mí, no es necesario crear un módulo para un complemento jQuery o instalar uno; en mi template.php agregué:

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

otra forma es agregar el siguiente código al archivo
page.tpl.php drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');


44
Agregar código directamente a las plantillas se considera una mala práctica.
mpdonadio

"Agregar código directamente a las plantillas se considera una mala práctica" ... ¿entonces el módulo inyector SQL es la mejor práctica entonces?
Bruno Vincent

Algunas de las otras formas mencionadas podrían considerarse una buena práctica @BrunoVincent, depende del nivel en el que desee atacar esto (código en un tema, código en un módulo personalizado o simplemente instalar un módulo como js injector)
Clive

en algunos casos es útil hacer esto, por ejemplo, si desea agregar una condición de archivo javascript
houmem
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.