Como adicionar o plugin Jquery ao Drupal?


19

Devo apenas colar o código no arquivo de modelo principal ou existe alguma outra maneira recomendada de anexar novos plugins Jquery no Drupal 7?


Que tipo de plugin JQuery você deseja usar e por quê? Normalmente, adicionar qualquer tipo de Javascript é adicionado usando a função drupal_add_js( api.drupal.org/api/drupal/includes--common.inc/function/… ).
21311 Jamie Hollern

Respostas:


15

A maneira mais fácil é apenas adicioná-lo ao arquivo .info do seu tema:

scripts[] = js/my_jquery_plugin.js

A única exceção é se você estiver adicionando um recurso externo (CDN / script hospedado); nesse caso, você deve usar drupal_add_js (), conforme explicado por Jamie Hollern


1
Mas o console do Chrome me altera:Uncaught TypeError: undefined is not a function
TangMonk 17/04

@ Alex, eu tenho uma pergunta idiota. Eu sei que o Drupal está usando a biblioteca jquery. Digamos que eu adicione a função "voltar ao topo" usando a idéia que você possui "scripts [] = js / back_to_top.js" em theme.info. Também preciso adicionar o arquivo jquery (como jquery v1.9, v1.11)?
CocoSkin

@CocoSkin você deve ficar bem #
Alex Weber

Na verdade não. Isso nem sempre funciona. Dois exemplos: 1) os scripts [] = js / jquery.hoverintent.js 2) os scripts [] = js / jquery.scrollme.js
sea26.2

Geralmente não é uma boa maneira de fazê-lo. Como você controla quais páginas são carregadas? Usedrupal_add_library()
anthonygore

12

Drupal tem Jquery empacotado com ele.

Para adicionar um arquivo js, ​​você pode usar drupal_add_js da maneira descrita em outras postagens.

Isso funcionará em casos simples, mas se você começar a ter plug-ins que dependem de outros plug-ins. você pode querer olhar para a API da biblioteca . Espero que em tempo os módulos sejam criados para oferecer suporte a bibliotecas populares, existem alguns para a interface do usuário do JQuery, consulte system_library () .

Neste exemplo, para incluir o módulo jQuery ui.accordion, você pode usar drupal_add_library ()

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

Isso garantirá que o js seja incluído junto com o CSS e quaisquer bibliotecas que dependem dele. Também garantirá que as bibliotecas sejam incluídas apenas uma vez.

Se você disser qual biblioteca está usando, posso fornecer um código de exemplo para defini-la

Então, primeiro crie um módulo para definir a biblioteca (chame-o de qtip) e faça o upload do módulo para uma pasta js abaixo da pasta do módulo

então 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;
}

Em seguida, adicione o arquivo colocado no seu código

drupal_add_library('qtip', 'qtip');

Isso pode ser um exagero para uma biblioteca simples, mas se você precisar gerenciar um grande número de bibliotecas em vários sites e temas, isso tornará a vida muito mais fácil.


Obrigado, eu estou usando biblioteca QTip - craigsworks.com/projects/qtip
Vonder

5

Se você deseja carregar o script apenas em algumas páginas (não todas), você pode adicioná-lo através do seu arquivo template.php. Basta adicionar código semelhante 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');
 }
}

Eu só testei isso no Drupal 6.


3

Você pode adicionar um arquivo JavaScript ao tema que você usa no site Drupal, adicionando uma script[] =linha no arquivo .info do tema que você está usando. Eu consideraria esse caso apenas se você estiver usando um tema personalizado ou uma versão modificada de um tema existente que foi renomeado; Eu não sugeriria fazê-lo se você estiver usando, por exemplo, Garland. Fazer isso nesses casos significaria perder todas as alterações sempre que o tema for atualizado ou copiar os arquivos de temas atualizados e, em seguida, reaplicar as mesmas alterações aplicadas à versão anterior dos arquivos; se a alteração está apenas adicionando uma script[]linha, a alteração é mínima e pode valer a pena fazê-lo, mas isso também significa que os arquivos JavaScript não são adicionados no diretório que contém os arquivos de tema ou você deve adicionar os arquivos JavaScript a cada hora em que o tema é atualizado.

Como alternativa, você pode criar um módulo personalizado ou adicionar código a um módulo personalizado existente que você já está usando para esse site.
O profissional é que os arquivos JavaScript serão adicionados a todos os temas como padrão, ou tema de administração, sem a necessidade de alterar todos os temas ativados no site e os usuários podem selecionar por si mesmos.

Como já foi relatado em outra resposta, hook_init()é o gancho que você deve implementar. Vou acrescentar que hook_library()é o novo gancho adicionado no Drupal 7 para arquivos Javascript, como os plug-ins do jQuery.


3

Você pode usar o módulo Js Injector para adicionar scripts diretamente no painel de administração do Drupal. Como alternativa, você pode usar a função drupal_add_js () para adicionar seu arquivo js à sua página.


Eu acho que isso é exatamente o que eu preciso, eu vou escolher a sua resposta como o melhor, mas eu quero ver se existem outras soluções primeiro;)
de Bruno Vincent

você pode adicionar esta linha ao seu theme.info script [] = 'caminho para o seu arquivo', que é um método, mas com esse método o js será carregado em todas as suas páginas, o que normalmente não é uma boa prática. Com os dois métodos acima, você pode adicionar os js exatamente nas páginas que deseja.
precisa

1

Você pode criar um módulo personalizado simples e adicioná-lo dessa maneira. O código seria semelhante ao seguinte:

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

módulo personalizado para adicionar JQuery? Seriamente?
Vonder

só se for externo, veja a minha resposta
Alex Weber

1

Você pode simplesmente usar YOURTHEME_preprocess_theme()se quiser aplicar a condição lógica:

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

e adicione também no arquivo yourtheme.info:

scripts[] = js/yourplugin.js


1

Se você estiver usando o módulo Contexto, instale Context Add Assets. Configure um contexto global ou um contexto específico e inclua uma nova reação para incluir o ativo JS por caminho ou por módulo.

Nenhuma codificação necessária.


Obrigado! Isso tem a vantagem de você poder limitar as bibliotecas a caminhos específicos, mas nenhuma codificação é necessária.
Druvision

1
Mas para plugins jQuery como o textext.js, que incluem 5 arquivos CSS e 5 JS em média, ainda dá muito trabalho.
Druvision

1

Existem muitas bibliotecas externas que precisam ser incluídas hoje em dia.

Colocá-los todos no diretório js do tema nem sempre é desejável, pois às vezes essas bibliotecas são compostas por vários arquivos js e vários arquivos css.

Acabei usando a libraries_get_pathfunção do módulo de bibliotecas para seguir seus caminhos a partir do diretório sites / all / libraries:

Aqui está como adicionei os arquivos selecionados relacionados ao 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");
  }

} ?>

Gostaria de saber se existe um repositório externo no qual todas essas bibliotecas são predefinidas, portanto não precisarei defini-las manualmente.


Como você adiciona páginas?
Umair


0

isto é o que funcionou para mim, não há necessidade de criar um módulo para um plugin jQuery ou instalar um - no meu template.php eu adicionei:

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

outra maneira é adicionar o seguinte código ao arquivo
page.tpl.php drupal_add_js (drupal_get_path ('tema', 'caminho / para / seu / plugin'). '/plugin.js', 'arquivo');


4
Adicionar código diretamente aos modelos é considerado uma prática ruim.
mpdonadio

"Adicionar código diretamente aos modelos é considerado uma má prática" ... então o módulo do injetor SQL é a melhor prática, então?
Bruno Vincent

Algumas das outras maneiras mencionadas podem ser consideradas boas práticas @BrunoVincent, depende de qual nível você deseja atacar isso (código em um tema, código em um módulo personalizado ou apenas instalar um módulo como js injector)
Clive

é, em alguns casos útil para fazer assim, por exemplo, você quiser adicionar um arquivo javascript conditionnaly
houmem
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.