Ordenar tabelas com o plugin TableSorter

14 de fevereiro de 2010

Olá para todos, neste artigo irei demonstrar como ordenar uma tabela de maneira muito fácil utilizando o plugin TableSorter com o framework Jquery.  O que faz com que esta ordenação de dados em uma tabela seja fácil é a total abstração que o Tablesorter nos proporciona, em outras palavas, não precisamos entender como nada funciona, apenas passamos o identificador para o plugin e ele faz toda a mágica.

Vamos ao que realmente interessa, para este exemplo vamos precisar do plugin Tablesorter que se encontra aqui: http://tablesorter.com/docs/ , e logicamente a última versão de preferência do framework Jquery que você pode baixar por aqui:  http://jquery.com/ .

Após o download destes arquivos coloque-os na pasta “js” da pasta do seu site, prefiro assim para poder organizar melhor os arquivos da aplicação 🙂 . Agora com os arquivos em seu devido lugar vamos criar a nossa página em HTML com a tabela que iremos ordenar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Tabela</title>
</head>
<body>
	<table id="myTable">
		<thead>
		<tr>
			<th>Last Name</th>
			<th>First Name</th>
			<th>Email</th>
			<th>Due</th>
			<th>Web Site</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>Smith</td>
			<td>John</td>
			<td>jsmith@gmail.com</td>
			<td>$50.00</td>
			<td>http://www.jsmith.com</td>
		</tr>
		<tr>
			<td>Bach</td>
			<td>Frank</td>
			<td>fbach@yahoo.com</td>
			<td>$50.00</td>
			<td>http://www.frank.com</td>
		</tr>
		</tbody>
	</table>
</body>
</html>

E entre as tags “<head>” vamos carregar os nossos scripts e colocar o código para executar a ordenação.

<script type="text/javascript" src="js/jquery-latest.js"></script>
	<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#myTable").tablesorter();
		});
	</script>

Portanto com estes pequenos scripts criamos nossa tabela dinamicamente ordenada. Confirmando minha afirmação de que seria fácil, terminamos este artigo. Deixem seus comentários abaixo.

Anúncios

Galeria de fotos MooFlow

30 de janeiro de 2010

Quando desenvolvemos algum site que necessite de uma galeria de fotos legal, que seja daquelas que impressionam o usuário, sempre acabamos escolhendo alguma coisa feita em flash, pelos óbvios motivos de recursos visuais que o mesmo nos proporciona na hora de criarmos. Porém caso você necessite criar um site com o máximo de compatibilidade com os navegadores do usuário, este recurso não é a melhor opção.

Alguns podem ter virado a cara pela minha opinião, mas sabemos que se você realmente quiser garantir a total visualização do seu site para o usuário, principalmente aquele que não entende o porquê existe um quadrado branco com um f no meio do site, você deve reduzir ao máximo os recursos de programação que exijam alguma instalação extra para o navegador do usuário.

Portanto graças a programadores conscientes, foi desenvolvida uma galeria de imagens em Java script utilizando a famosa biblioteca “MooTools“, a implementação desta galeria é muito simples e não exige quase nada de conhecimento da biblioteca ou muito menos de Java script.

Vamos ao que interessa, para começarmos a programar devemos fazer o download da galeria e do framework “MooTools”. Neste link você pode baixar a galeria: http://www.outcut.de/MooFlow/Download.html , e neste outro podemos fazer o download do Mootools: http://mootools.net/download
Vamos criar a nossa página em HTML com as imagens dentro de uma div MooFlow:

<HTML>
<head>
        <title>Galeria mootools</title>
</head>
<body>
	<div id="MooFlow">
		<a href=”imagens/big/image1.jpeg”><img src=”imagens/image1.jpeg”></a>
<a href=”imagens/big/image2.jpeg”><img src=”imagens/image2.jpeg”></a>
<a href=”imagens/big/image3.jpeg”><img src=”imagens/image3.jpeg”></a>
<a href=”imagens/big/image4.jpeg”><img src=”imagens/image4.jpeg”></a>
	</div>
</body>
</html>

Com nossa página criada vamos colocar os códigos da galeria entre as tags <head>:

<link rel="stylesheet" type="text/css" href="MooFlow.css" />
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="MooFlow.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
	var myMooFlowPage = {
		start: function(){
			var mf = new MooFlow($('MooFlow'), {
				startIndex: 5,
				useSlider: true,
				useAutoPlay: true,
				useCaption: true,
				useResize: true,
				useMouseWheel: true,
				useKeyInput: true
			});
		}
	};
	window.addEvent('domready', myMooFlowPage.start);
/* ]]> */
</script>

Pronto isto é o suficiente para nossa galeria funcionar, lembre-se de colocar os arquivos da galeria na pasta correta e prestem atenção na hora de colocar os arquivos das imagens. Em breve atualizarei este artigo para colocar o link para a demonstração desta galeria. Quaisquer dúvidas postem ai embaixo nos comentários que terei o maior prazer em ajudá-los.