CSS/HTML, Java Script

Visualizar ou ocultar Div – Java Script / CSS – Atributo Display

O script abaixo permite alterarmos o atributo display das divs, possibilitando ao usuário visualizar ou ocultar o conteúdo das mesmas.

Abaixo o arquivo Java Script:

function altera_display(id) {
	// Opções para o atributo display - block, inline e none
	if(document.getElementById(id).style.display=="none") {
		document.getElementById(id).style.display = "block";
	}
	else {
		document.getElementById(id).style.display = "none";
	}
}

Abaixo, o arquivo HTML:

<html>
	<head>
		<title> Alteracao atributo Display </title>
			<script type="text/javascript" src="altera_display.js"></script>
	</head>
	<body>
		<h2> Selecione as opções abaixo: </h2>
		<p>
			<!-- Altera o valor do atributo Display no evento onclick atraves do id da Div-->
			<a href="#" onclick="javascript: altera_display('div01');"> Div 01 </a> |
			<a href="#" onclick="javascript: altera_display('div02');"> Div 02 </a> |
			<a href="#" onclick="javascript: altera_display('div03');"> Div 03 </a> |
			<a href="#" onclick="javascript: altera_display('div04');"> Div 04 </a> |
		</p>
		<!-- Opções para o atributo display - block, inline e none -->
		<div id='div01'	display: block;>
			Conteudo Div 01
		</div>
		<div id='div02' display: block;>
			Conteudo Div 02
		</div>
		<div id='div03'	display: block;>
			Conteudo Div 03
		</div>
		<div id='div04'	display: block;>
			Conteudo Div 04
		</div>
	</body>
</html>

Ao selecionar os links, as Divs serão visualizadas ou ocultadas.
Alterando o atributo Display no documento .html, é possivel modificar a forma como as divs serão apresentadas inicialmente.

Link para download dos arquivos relacionados.

Boa sorte = )

Anúncios
JQuery, PHP

Ordenação de tabelas – Java Script – JQuery – Tablesorter

Ordenação de tabelas utilizando JQuery e o plugin Tablesorter.

O plugin tablesorter permite que você ordene as tabelas no lado do cliente. Você inclui o jQuery e o pluguin Tablesorter e informa ao plugin quais tabelas deseja ordernar. Desta forma, evita o recarregamento das paginas e o consumo excessivo dos recursos do servidor.

Para obter os arquivos e informações:

http://jquery.com/

http://tablesorter.com/docs/

Exemplo do post:

http://andrelgfreitas.com/blogetilico

Crie um arquivo HTML com a seguinte estrutura:

Você deve incluir  as tags: THEAD e TBODY

——————————————————-

<html>
<head>
<title>JQuery – Biblioteca – tablesorter</title>
</head>
<body>
<table id=””>
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Pierre Joseph Proudhon</td>
<td>pierrejosephproudhon@mail.com</td>
</tr>
<tr>
<td>02</td>
<td>Leon Tolstói</td>
<td>leontolstoi@mail.com</td>
</tr>
<tr>
<td>03</td>
<td>Friedrich Nietzsche</td>
<td>friedrichnietzsche@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>

——————————————————-

Inclua a biblioteca JQuery e o plugin Tablesorter ao arquivo.

<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>

Por padrão, as linhas serão lançadas entre as tags <head> </head>

Note que os arquivos: jquery-1.4.2.min.js e jquery.tablesorter.min.js estão na mesma pasta que o arquivo HTML.

Inclua também entre as tags <head> </head>  as linhas:

<script type=”text/javascript”>
$(document).ready(function()
{
$(“#tabela”).tablesorter();
}
);
</script>

Vincule o ID de sua tabela com o nome utilizado na função, no nosso exemplo “tabela”.

<table id=”tabela”>

Desta forma, ao iniciar o documento, você estará repassando os parâmetros da função para o objeto <table>.

Ao final, o arquivo HTML deverá estar com a seguinte estrutura:

——————————————————

<html>
<head>
<title>JQuery – Biblioteca – tablesorter</title>
<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#tabela”).tablesorter();
}
);
</script>
</head>
<body>
<table id=”tabela”>
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Pierre Joseph Proudhon</td>
<td>pierrejosephproudhon@mail.com</td>
</tr>
<tr>
<td>02</td>
<td>Leon Tolstói</td>
<td>leontolstoi@mail.com</td>
</tr>
<tr>
<td>03</td>
<td>Friedrich Nietzsche</td>
<td>friedrichnietzsche@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>

——————————————————

Abra o arquivo com um navegador e clique nos cabeçalhos da tabela para visualizar a ordenação.

Boa sorte  = )

Compatibilidade de navegadores:

O plugin Tablesorter foi testado com sucesso nos seguintes navegadores com JavaScript habilitado:

  • Firefox 2 +
  • Internet Explorer 6 +
  • Safari 2 +
  • Opera 9 +
  • Konqueror
  • Chrome 6 +