Como obter o jquery trabalhando no Drupal 7 - para iniciantes


8

Eu tenho lido muitos tutoriais on-line sobre como obter o jquery trabalhando no drupal 7. Embora existam muitas linhas de código e exemplos, o que não consigo encontrar é qual pedaço de código colocar onde (talvez seja óbvio para a maioria dos desenvolvedores)

Então, o que eu faço é

1) Crio um novo bloco personalizado

2) Lá da interface do usuário drupal, eu escrevo meu código

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3) Eu mostro o bloco, mas o jquery não está carregado.

Estou lendo que eu deveria colocar esse código em arquivos de modelo, arquivos de tema, arquivos css, arquivos de informações e não sei mais!

Não está claro para mim em qual arquivo exatamente e em qual caminho eu tenho que colocar o código acima para funcionar corretamente?

Algum conselho?

Muito Obrigado!

Respostas:


11

Algumas coisas aqui:

  1. Se você puder evitar inserir javascript e PHP no site por meio da interface do usuário, isso possivelmente poupará problemas. Se você não tiver alternativas, tudo bem, mas aqui estão algumas razões pelas quais não é uma ótima idéia: https://drupal.stackexchange.com/a/2512/10729 (observe que isso é direcionado ao PHP, não js, ​​mas a maioria dos os pontos ainda representam js). O módulo de exemplos tem um exemplo de criação de blocos personalizados.
  2. Para anexar js, se você quiser em todas as páginas, pode adicioná-lo ao arquivo de informações do seu tema. Se você quiser apenas em alguns lugares, é melhor usar o drupal_add_js (), para que ele seja apenas nas páginas que ele precisa ser. Para anexar o comportamento js aos formulários, você também pode usar o atributo #attached nos itens do formulário.
  3. Se você usar $ (document) .ready (), ele acionará seu javascript quando a página for carregada; no entanto, se a página for atualizada via ajax, seu javascript não será acionado novamente, para que a nova marcação não seja afetada pelo seu javascript é. Para lidar com esses casos, você deve usar comportamentos drupal em vez de pronto para o documento.

Por exemplo:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Do your thing here.
    }
  };
})(jQuery);

Eu recomendo a leitura destas páginas:
Gerenciando JavaScript no Drupal 7
Trabalhando com JavaScript e jQuery


7

No seu .js, insira como este código;

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

     // All our js code here
     alert('Hello jQuery');
     // end our js code

   }

 };})(jQuery);

No seu template.php do tema, crie hook_preprocess_html e use drupal_add_js

function themename_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/your.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

Apenas mude o nome deles


11
Observe que isso adicionará o javascript a todas as páginas, o que pode ou não ser desejável.
ROOBY

11
Hehe sim, isso adicionará o javascript a todas as páginas. Apenas deixe @apdr tentar isso e testar com o seu conhecimento
sibiru

2
se você deseja que os js sejam carregados em todas as páginas por meio do tema, não faria mais sentido listar o arquivo no arquivo .info do tema?
Jimajamma

3

seu arquivo .js deve ficar assim:

(function ($) {
    Drupal.behaviors.cdgi = {
        attach: function(context) {

        //your code

        }
    }
}(jQuery));

use drupal_add_js () no seu módulo para adicionar esse arquivo no Drupal. boas referências aqui e aqui .

limpe o cache frequentemente;)

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.