Em mais um post de jQuery, venho apresentar-lhes o plugin tablesorter. Este plugin ordena as colunas de uma tabela a partir do clique no cabeçalho da mesma:
No código, basta adicionar o javascript e o css do tablesorter, além da biblioteca jquery:
<html>
<head>
<link rel="stylesheet" type="text/css" href="tablesorter.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js">
</script>
<script type="text/javascript">
$(function(){
$('.tablesorter').tablesorter()
})
</script>
</head>
<body>
<table class="tablesorter" cellspacing="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
<body>
</html>
Na documentação oficial ainda, são listadas algumas das configurações possíveis, dentre as quais podemos destacar:
É isso ai 
Neste post venho mostrar-lhes outro bom plugin para jQuery, o jCarousel.
Com este plugin podemos fazer com que diversas imagens rodem em um espaço limitado tornando o layout mais amigável.
Vamos ao nosso primeiro exemplo de carrossel:
Para fazer um carrossel simples, como este, precisaremos dos arquivos de js e css da biblioteca jCarousel, além do css de skin do jCarousel a ser utilizado, e do js do jQuery. Segue o código:
<html>
<head>
<title>Carrossel simples com jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/tango-skin.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carrossel').jcarousel()
})
</script>
</head>
<body>
<h1>jCarousel - Carrosel Simples</h1>
<ul id="carrossel" class="jcarousel-skin-tango">
<li><img src="img/imagem1.jpg" /></li>
<li><img src="img/imagem2.jpg" /></li>
<li><img src="img/imagem3.jpg" /></li>
<li><img src="img/imagem4.jpg" /></li>
<li><img src="img/imagem5.jpg" /></li>
<li><img src="img/imagem6.jpg" /></li>
</ul>
</body>
</html>
Este é o exemplo mais simples de utilização do jCarousel, existem várias outras variações deste através de opções passadas a ele. Dentre as funcionalidades podemos destacar:
Continuando a série de post sobre jQuery iniciado por Gabriel.
Hoje vou mostrar um pouco sobre Effects e alguns métodos interessantes do jQuery, Usando como exemplo um simples slide de Imagem.
Neste código vemos o effect FadeIn(efeito de aparecer) e fadeOut(efeito de desaparecer) e o método next
Continue Reading »
Pulando um pouco a seqüência de posts anteriores, gostaria de mostrar-lhes o plugin Jquery Corner que cria bordas arredondas com o JQuery.
E como funciona?
Continue Reading »
Continuando o post anterior sobre jQuery, iremos descrever o objeto jQuery.
A maioria das funcionalidades do jQuery é iniciada pela objeto $. O $ no jQuery possui diversas funcionalidades, que podem ser:
- Obtenção de objetos a partir de seletores.
Ex.: Obtendo todos os objetos que contenham a classe "dinamico":
alert($(".dinamico").length)
- "Window onload" (funções que irão ser executadas após o término do carregamento da página).
Ex.: Executando função com mensagem simples:
$(function(){
alert("A página já carregou!")
})
- Funções úteis (a serem descritas em um próximo post).
Ex.: Removendo espaços do final e começo de uma string:
alert($.trim(" texto ").length)
- Ajax
Ex.: Requisição ajax por get
$.get("exemplo-ajax.php", function(resposta){
alert(resposta)
})
- Criar conteúdo dinâmicamente
Ex.: Adicionando um novo paragrafo ao corpo da página:
$('<p>Novo Paragrafo</p>').appendTo(document.body)
Seletores
Seletores são declarações que igualam um ou vários elementos do HTML. São eles que mapeiam o HTML no css:
| Seletor |
Descrição |
| TAG |
Traz todos os elementos que sejam da TAG selecionada.
Ex.:
alert($('p').length) |
| #ID |
Traz o elemento que tenha o ID selecionado.
Ex.:
$('#conteudo').css('background-color', '#ccc') |
| .CLASSE |
Traz todos os elementos que tenham a CLASSE selecionada.
Ex.:
$('.content-center').css('text-align', 'center') |
| [PROPRIEDADE=VALOR] |
Traz todos os elementos que tenham a PROPRIEDADE com o VALOR selecionado.
Ex.:
$('[name=nome]').val('Gabriel Verta') |
| SELETOR1 SELETOR2 |
Traz todos os elementos que SELETOR2 que estejem dentro do SELETOR1.
Ex.:
$('div label').addClass('required') |
Existe uma lista extensa de seletores para jQuery, que podem ser vistas na documentação oficial do jQuery. Tentei criar um site com uma forma dinâmica de ver estes seletores em jQuery, espero que entendam como funciona o site.
Introdução
JQuery é uma biblioteca Javascript que tem como objetivo simplificar o tratamento javascript em uma página HTML, ou seja, tornar mais fácil o tratamento de eventos, animações, requisições Ajax... Muito utilizada no mercado devido a facilidade de uso e de extensão, onde os diversos programadores que a utilizam criam plugins para as mais variadas atividades, tais como slide de imagens, máscara para campos de formulário, tornar bordas redondas dentre outras...
Como funciona?
Para utilizar a biblioteca basta adicionar o arquivo Javascript do jQuery:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
A última versão também pode ser encontrada em http://code.jquery.com/jquery-latest.js
Exemplo de utilização
Caso eu queira que todos os elementos que tenham a classe "dinamico" sejem ocultadas quando apertado o botão ocultar, eu teria o seguinte código dentro da função de ocultar:
$('.dinamico').hide()
ou ainda, utilizando os efeitos do jQuery:
$('.dinamico').fadeOut("slow")
Veja este exemplo funcionando:
No próximo post explicarei algumas funcionalidades do objeto jQuery e como funcionam os seletores.
