Arquivo

Textos com Etiquetas ‘jQuery’

Drupal+jQuery no Drupal 5.x

13, fevereiro, 2009 Márcio Henrique Locatelli Sem comentários

É notório que o slogan do jQuery “Write less, do more” é realmente verdadeiro. O jQuery é uma ferramenta que simplifica e muito a construção de código JavaScript. O Drupal a partir da versão 5.0 já vem com o jQuery como default para a construção de funcionalidades em JavaScript. Esse tutorial tem o objetivo  demonstrar como utilizar a dobradinha jQuery + Drupal.

Bom galera, como falei anteriormente o jQuery já vem pré-instalado com o Drupal, ele encontra-se na pasta misc/jquery.js, então para construirmos nosso exemplo, entre na sessão administrativa de seu site Drupal, selecione a Opção Criar Conteúdo e crie um conteúdo do tipo Page. Entre com Teste de jQuery para o título e em Formato de entrada selecione a opção:  PHP code.

No Body copie o seguinte código:

<?php
drupal_add_js(path_to_theme(). '/jquery.js');
?>

$(document).ready(function() {
$("a").click(function() {
$("p").fadeIn("slow");
});
});

<a href="#">TESTE</a>
<p style="background:#CCC;display:none"> TESTE 1 </p>

E é só isso, você poderá trabalhar tranquilamente com qualquer função do jQuery no Drupal.

Categories: Drupal, jQuery Tags: ,

Introdução ao jQuery

11, fevereiro, 2009 Márcio Henrique Locatelli 2 comentários

O jQuery é um biblioteca em JavaScript que nos auxilia e simplifica em muito nossa vida, tornando mais fácil manipular eventos, seletores css, ajax, criar efeitos e muito mais!

Nesse primeiro artigo sobre jQuery vou apresentar um exemplo trivial de manipulação de um elemento utilizando o nosso famoso getElementById e logo após um exemplo utilizando a biblioteca jQuery.

Exemplo 1 – Manipulação sem jQuery


<script language="javascript">
function alteraFonte(id){
x=document.getElementById(id);
x.style.textTransform='uppercase';
x.style.color='#FF0000';
}
</script>


<a href="#" onclick="javascript:alteraFonte('paragrafo')"> Clique </a>

<p id="paragrafo">

Ao Clicar no link iremos alterar as propriedades deste parágrafo

</p>

Exemplo 2 – jQuery


<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

<script language="javascript">
$(document).ready(function(){
$("a").click(function(){
$("#paragrafo").css({"text-transform":"uppercase", "color":"#FF0000"});
});
});
</script>


<a href="#"> Clique </a>

<p id="paragrafo">
Ao Clicar no link iremos alterar as propriedades deste parágrafo
</p>

Opa, a coisa começou a ficar interessante, como diria Jack o Estripador, vamos explicar o código jQuery  por partes:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

Inclusão da biblioteca do jQuery, a mesma pode ser obtida neste endereço:  http://docs.jquery.com/Downloading_jQuery

<a href="http://docs.jquery.com/Downloading_jQuery">
</a>$(document).ready(function(){
// seu código
};

O chamado Ready Event substitui nosso famoso window.onload, ele verifica se o DOM esta totalmente carregado para  poder manipular o mesmo.

$("a").click(function(){
$("#paragrafo").css({"text-transform":"uppercase", "color":"#FF0000"});
});

$ ( “a”) é um seletor do jQuery, neste exemplo estamos selecionando todos os elementos que possuam um link, o sinal de $ é um alias para a classe jQuery , fazendo com que $( ) gere um novo objeto.  A função click que chamamos a seguir é um método do  objeto jQuery. Ela liga um evento de clique para todos os objetos selecionados e executa a função fornecida quando o evento ocorrer.

Bom pessoal, espero ter ajudado com este tutorial, é fácil ver várias vantagens do jQuery, entre elas a manipulação de eventos (não precisamos escrever um onclick para cada elemento) e conseguimos separar com sucesso a estrutura html do nosso código javascript.

Vou escrever vários posts sobre jQuery ainda, explicando mais sobre sua estrutura e funcionalidades ;-)

Categories: jQuery Tags: