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?
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?
Respostas:
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
Uncaught TypeError: undefined is not a function
drupal_add_library()
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.
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.
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.
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.
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');
}
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
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.
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_path
funçã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.
Recomendo que você carregue o jQuery a partir da fantástica CDN do Google. Verifique este link para obter mais informações: http://code.google.com/apis/libraries/devguide.html#jquery. Certifique-se de não carregar o mesmo script várias vezes em seu site.
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',
);
}
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');
drupal_add_js
( api.drupal.org/api/drupal/includes--common.inc/function/… ).