Olha eu de novo !! Bom no meu segundo post vou falar sobre assunto que irei trabalhar bastante nestes próximos dias, e o culpado por eu ter que fazer isso é o prof° Jackson, ops !!! esqueci de apresentá-lo, Jackson é professor do CEULP/ULBRA ministra as maiorias das matérias de programação do curso de Sistemas de Informação, na qual eu sou aluno, e também é coordenador do projeto Fábrica de Software e chefe do Portal, na qual, sou membro e funcionário respectivamente. Portanto, nos lançou o desafio para aprender sobre um framework de JavaScript chamado jQuery, então vamos mostrar um pouco da lição de casa que o professor passou !!
jQuery é uma biblioteca JavaScript lançada em janeiro de 2006 por Jon Resing, na qual usou como slogan do seu projeto "write less, do more" (escrever menos, fazer mais), Resing trabalha na Mozilla Corporation e é autor do livro Pro JavaScript Techniques.
Algumas características do framework
Então, sem mais delongas, vamos aos exemplos:
$(document).ready(function(){ … } – executa a função assim que a árvore do documento tenha sido carregado, quase equivalente a declaração do JavaScript window.onload, porém, mais otimizado, já que função do jQuery não espera a carregamento total da página.
Toggle(...) – Este evento permite executar duas ou mais, funções seguidas e alternadamente mediantes cliques sucessivos.
$(‘a’), $(‘#div’) – funções de seleção de objeto DOM que utiliza os famosos seletores da CSS.
Animate(...) – função que permite a manipulação das propriedades CSS dos elementos.
Neste exemplo assim que for clicado no tag a dispara o evento do toggle() que se encarrega de alternar as funções, que buscam pelo elemento com o id #div1 e insere/altera as propriedades CSS dele.
Exemplos utilizando plug-in:
$('#tabela').tablesorter(); - inicia o documento com a tabela já ordenada de crescente de cima para baixo.
$('#tabela').tablesorter( {sortList: [[0,0], [1,0]]} ); - altera a ordenação de acordo com o coluna específica, define a ordem em que o as colunas serão ordenadas através do parâmetro [[columnIndex, sortDirection], ... ], onde columnIndex indica o qual é a coluna, e sortDirection define qual será a ordem ordenado, sendo 0 para crescente (ascendente) e 1 para decrescente (descendente). Perceba que foi utilizado as tags thead e tbody, é através delas que a plug-in separa o corpo e o cabeçalho da tabela.
Bom é isso ai jQuery realmente facilitou muito o nosso trabalho !! Até a próxima !!!
jQuery é uma biblioteca JavaScript lançada em janeiro de 2006 por Jon Resing, na qual usou como slogan do seu projeto "write less, do more" (escrever menos, fazer mais), Resing trabalha na Mozilla Corporation e é autor do livro Pro JavaScript Techniques.
Algumas características do framework
- DOM - acesso direto usando os poderosos seletores das CSS 2.1 e CSS 3, e alguns seletores criados da biblioteca;
- Manipuladores de conteúdo - sem limitações e com pouquíssimo código;
- Eventos - uma infinidade de efeitos e animações que vai deixar o seu site irreconhecível (pra melhor é claro);
- AJAX - É claro não podia faltar e bem mais fácil de utilizar
- Encadeamento – admite programação encadeada, ou seja, cada método retorna um objeto;
- Plug-ins - Por ser uma biblioteca de código aberto e extremante extensível, jQuery deixa aberta a porta para que qualquer um possa criar plug-ins, que utilizem e incrementem mais as suas funcionalidades. E a porta parece totalmente escancarada, pois atualmente existem vários plug-ins e a tendência é aumentar, visto que a cada dia, a biblioteca ganha mais admiradores (usuários).
Então, sem mais delongas, vamos aos exemplos:
Toggle(...) – Este evento permite executar duas ou mais, funções seguidas e alternadamente mediantes cliques sucessivos.
$(‘a’), $(‘#div’) – funções de seleção de objeto DOM que utiliza os famosos seletores da CSS.
Animate(...) – função que permite a manipulação das propriedades CSS dos elementos.
Neste exemplo assim que for clicado no tag a dispara o evento do toggle() que se encarrega de alternar as funções, que buscam pelo elemento com o id #div1 e insere/altera as propriedades CSS dele.
Exemplos utilizando plug-in:
$('#tabela').tablesorter( {sortList: [[0,0], [1,0]]} ); - altera a ordenação de acordo com o coluna específica, define a ordem em que o as colunas serão ordenadas através do parâmetro [[columnIndex, sortDirection], ... ], onde columnIndex indica o qual é a coluna, e sortDirection define qual será a ordem ordenado, sendo 0 para crescente (ascendente) e 1 para decrescente (descendente). Perceba que foi utilizado as tags thead e tbody, é através delas que a plug-in separa o corpo e o cabeçalho da tabela.
Bom é isso ai jQuery realmente facilitou muito o nosso trabalho !! Até a próxima !!!
Referências :
http://tablesorter.com/docs/
http://docs.jquery.com/Main_Page
http://ejohn.org/
Amostra do Livro – jQuery A Biblioteca do programador JavaScript, Maurício Samy Silva, novatec
Uma ótima idéia Leandro.
ResponderExcluirAchei ótimo!
ResponderExcluirParece um prof!
rsss
Um conteúdo muito interessante, e bem explicado. Serei usuária assidua do seu blog. Parabéns.
ResponderExcluirValéria Mota