Com o plugin Quick Pagination você é capaz de criar paginações rapidamente em suas listas. Ótimo para converter listas extensas em listas menores. O plugin ainda permite ajustar alguns dos seus parâmetros adicionais. Você pode especificar a navegação na parte superior, inferior ou ambos, pode também especificar o número de itens a serem exibidos.

Lembrando que para usar esse plugin você deve fazer o download da biblioteca jquery, ou carregar o arquivo a partir do site do Google.

Como usar jQuery Quick Pagination

Exemplo de marcação HTML

<ul class="pagination1">
	<li>1 - Item 1 de 25</li>
    <li>2 - Item 2 de 25</li>
    <li>3 - Item 3 de 25</li>
    <li>4 - Item 4 de 25</li>
    <li>5 - Item 5 de 25</li>
    <li>6 - Item 6 de 25</li>
....

Criando três exemplo de paginação

<script type="text/javascript">
$(document).ready(function() {
	$("ul.pagination1").quickPagination();
	$("ul.pagination2").quickPagination({pagerLocation:"both"});
	$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
});
</script>

Primeiro exemplo
Opção padrão mostrando 10 itens da lista e navegação na parte inferior.

Segundo exemplo
Mostrando 10 itens da lista e navegação na parte superior e inferior.

Terceiro Exemplo
Especificados 3 itens na lista e navegação na parte superior e inferior.

Referências:

• http://www.jquery4u.com/tutorials/jquery-quick-pagination-list-items/
• http://archive.plugins.jquery.com/project/quick_paginate

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Forte abraço e até a próxima!

Isso vai interessar você também

• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

20 Tutoriais de Slideshow usando jQuery

Todo desenvolvedor web sabe que conseguimos ótimos efeitos com jQuery. Usando jQuery você pode criar efeitos dinâmicos e interativos para envolver os seus leitores. Uma maneira de mostrar seu conteúdo de uma forma interativa é usar Slideshows desenvolvidos com JavaScript. Esse tipo de apresentação tem se tornado cada vez mais popular em páginas da web.

Galeria de imagens com Slideshow dão uma boa experiência ao usuário do seu site, a técnica torna a visualização de imagens muito mais agradável e intuitiva. Dessa forma você pode mostrar uma grande quantidade de informação em um espaço bem menor na página.

O site queness fez uma lista de 20 tutoriais para você montar sua galeria de fotos utilizando slideshows. Todos os tutoriais de o link de demonstração do efeito. Veja um exemplo de Slideshow com jquery.

Link para os 20 tutoriais sobre Slideshow para galeria de imagens com jQuery.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

A máscara torna a entrada de dados mais fácil e ainda serve para controlar os valores que os usuários podem inserir em um campo de texto, evitando que o usuário digite texto onde o correto seria número.

Primeiro você deve incluir a chamada para a biblioteca jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Depois inclua a chamada do plugin Masked Input. Perceba que o nome jquery.maskedinput é o nome do arquivo do plugin e js a extensão que indica ser um arquivo JavaScript.

<script src="jquery.maskedinput.js" type="text/javascript"></script>

Caracteres chaves para criar as máscaras

Evitando conflito com outras biliotecas

Uma das razões que tornam a biblioteca jQuery uma das mais populares é a capacidade de adição de plugins. O problema é que todos eles usam $ como nome principal para chamar suas funcionalidades podendo, ocasionar algum tipo de conflito.

Para resolver esses problema utilizamos a função jQuery.noConflict().

Usando o plugin Masked Input

Depois de tudo pronto chamamos a função de máscara para os itens que você deseja. No exemplo utilizamos #data, #telefone, #cpf, #cep, #cnpj e #placa que são respectivamente os id’s dos campos a serem mascarados

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){
   $("#data").mask("99/99/9999");
   $("#telefone").mask("(099) 9999-9999");
   $("#cpf").mask("999.999.999-99");
   $("#cep").mask("99999-999");
   $("#cnpj").mask("99.999.999/9999-99");
   $("#placa").mask("aaa - 9999");
});
</script>

Se você não estiver satisfeito com o caractere underscore (’_') como um espaço reservado, você pode passar um argumento opcional para o método maskedinput.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Veja nessa página de demonstração o plugin funcionando.

Abaixo um vídeo do plugin Masked Input

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

Abaixo um vídeo da ferramenta em ação.

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• Turbine o Firefox
• Efeitos com jQuery
• Dicas para o firefox
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I

Nesse artigo vou mostrar como fazer efeitos de opacidade, revelar e ocultar elementos com o uso da fantástica biblioteca jQuery.

Para disparar a ação utilizamos um botão.

Confira todos os efeitos na página de exemplos de efeitos jQuery.

Efeitos básicos:

show

Exibe o elemento alvo do seletor jQuery que tenha sido escondido.

    $("button").click(function () {
      $("p").show("slow");
    });

Como parâmetro podemos passar slow, normal e fast para velocidade lenta, normal e rápida respectivamente. Podemos digitar um número em milissegundos

hide

Oculta o elemento alvo do seletor jQuery.

    $("button").click(function () {
      $("p").hide("fast");
    });

Efeitos deslizantes:

slideDown

Revela o conteúdo suavemente de cima para baixo

    $("button").click(function () {
      $("p").slideDown(1000);
    });

slideUp

Oculta o conteúdo suavemente de baixo para cima

    $("button").click(function () {
      $("p").slideUp("fast");
    });

Efeitos de opacidade:

fadeIn

Revela o elemento oculto iniciando em 0% (oculto) até 100% (visível)

    $("button").click(function () {
      $("p").fadeIn("fast");
    });

fadeOut

Oculta o elemento iniciando em 100% (visível) até 0% (oculto)

    $("button").click(function () {
      $("p").fadeOut("fast");
    });

Confira todos os efeitos na página de exemplos de efeitos jQuery.

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

HTML

<table id="curso">
<caption>Tabela de cursos de graduação</caption>
<thead>
	<tr>
    	<th scope="col">CURSO</th>
        <th scope="col">PERÍODO</th>
        <th scope="col">CIDADE</th>
        <th scope="col">VAGAS</th>
    </tr>
</thead>
<tfoot>
	<tr>
    	<td colspan="6">Estes cursos exigem do aluno prova de habilidades.</td>
    </tr>
</tfoot>
<tbody>
	<tr>
    	<td>Arquitetura e Urbanismo</td>
        <td>diurno</td>
        <td>São Paulo</td>
        <td>50</td>
    </tr>
	<tr>
    	<td>Biblioteconomia</td>
        <td>Noturno</td>
        <td>Porto Alegre</td>
        <td>30</td>
    </tr>
... resto da marcação...
</tbody>
</table>

Script jQuery para o efeito

$(function(){
$('table#curso tbody tr').hover(
	function(){
		$(this).addClass('destaque');
	},
	function(){
		$(this).removeClass('destaque');
	}
	);
});

• Na linha 2 estamos colocando o efeito hover no elemento selecionado, no caso a linha </tr>.
• Na linha 3 até 5: o que vai aconseter quando o ouse passar sobre a linha, no nosso caso adicionar a classe destaque.
• Na linha5: A virgula depois das chaves indica que terminou a primeira parte do método (lembra? O método hover tem duas funções sobre e fora).
• Na linha 6 até 9: o que deve acontecer quando o mouse sar de cima da linha, no caso, remover a classe destaque. Na linha 9 temos o fim do método hover.

Veja o efeito final.

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

Como instalar o plugin Accordion

Primeiro devemos baixar o plugin no link http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

Veja os efeitos prontos…

Exemplo 1
Exemplo 2

Ao descompactar o arquivo baixado você verá uma pasta denominada jquery-accordion. O Arquivo que vamos utilizar está lá dentro com o nome de jquery.accordion.
Agora vamos chamar o arquivo da biblioteca jQuery e o plugin.

Marcação HTML

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-accordion/jquery.accordion.js"></script>

<strong>Veja a marcação HTML</strong>

[source language="html"]<div id="geral">
<h1>Efeito sanfona com Accordion</h1>
<div id="efeito">
<a href="#"> Fundamentos sobre CSS</a>
	<div>
    <p>ponha aqui o conteúdo...</p>
    </div>

    <a href="#"> Fundamentos sobre (X)HTML</a>
	<div>
    <p>ponha aqui o conteúdo...</p>
    </div>

    <a href="#"> Fundamentos sobre jQuery</a>
	<div>
    <p>ponha aqui o conteúdo...</p>
    </div>
</div>
</div>

Estilização CSS

<style type="text/css">
*{margin:0;padding:0;}
#geral	{
		background:#CCCCCC;
		width:500px;
		margin:0 auto;
		padding:10px;
		border:dotted 1px;
		}
#efeito a	{
			border-bottom:groove 1px #000;
			display:block;
			font-weight:bold;
			color:#fff;
			background:#999;
			padding:5px 10px;
			text-decoration:none;
			}
#efeito a:hover{background:#666;}
#efeito a.selected{background:#666;}
div p {padding:7px 0;}
</style>

E o nosso script para criar o efeito sanfona

<script type="text/javascript">
$(function(){
	$('#efeito').accordion({
	autoheight:false
	});
});
</script>

Na quarta linha podemos utilizar a propriedade false e true para o parâmetro autoheight
true: altura da div é fixa
false: ajusta conforme a quantidade de conteúdo.

Veja aqui o efeito final

Com autoheight igual a false
Com autoheight igual a true

Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

<table id="curso">
<caption>Tabela de cursos de graduação</caption>
<thead>
	<tr>
    	<th scope="col">CURSO</th>
        <th scope="col">PERÍODO</th>
        <th scope="col">CIDADE</th>
        <th scope="col">VAGAS</th>
    </tr>
</thead>
<tfoot>
	<tr>
    	<td colspan="6">Estes cursos exige do aluno prova de habilidades.</td>
    </tr>
</tfoot>
<tbody>
	<tr>
    	<td>Arquitetura e Urbanismo</td>
        <td>diurno</td>
        <td>São Paulo</td>
        <td>50</td>
    </tr>
	<tr>
    	<td>Biblioteconomia</td>
        <td>Noturno</td>
        <td>Porto Alegre</td>
        <td>30</td>
    </tr>
	<tr>
    	<td>Comunicação Social	</td>
        <td>diurno</td>
        <td>Bauru</td>
        <td>25</td>
    </tr>
	<tr>
    	<td>Pedagogia</td>
        <td>diurno</td>
        <td>São Paulo</td>
        <td>50</td>
    </tr>
	<tr>
    	<td>Serviço Social</td>
        <td>noturno</td>
        <td>Rio de Janeiro</td>
        <td>20</td>
    </tr>
	<tr>
    	<td>Turismo</td>
        <td>noturno</td>
        <td>Salvador</td>
        <td>20</td>
    </tr>
</tbody>
</table>

CSS

<style type="text/css">
table	{
		border-collapse:collapse;
		border:solid 2px #999999;
		width:600px;
		margin: 0 auto;
		}
thead tr th	{
			text-align:center;
			border-bottom:solid 2px #000000;
			border-left:solid 2px #000000;
			}

tr td, tr th	{
				border:dotted 1px #999999;
				}

tfoot tr td	{
			text-align:center;
			border-top:solid 2px #000000;
			}
.cor{background:red;}
.cor_{background:gold;}

</style>

Tabela com marcação e estilização

Para criar o efeito de zebra vamos utilizar os chamados pseudosseletores :even e dd que se destinam a selecionar ocorrências pares e ímpares respectivamente de qualquer conjunto de elementos declarados.

OBS: A contagem desses pseudosseletores começa em 0.

Para nosso alvo ser mais preciso, usamos o atributo id para dar uma identificação a nossa tabela (id=”curso”).
Vamos iniciar trocando a cor das linhas pares (pseudosseletore :even).
Para isso temos que acessar o elemento tr que está dentro do elemento tbody que está dentro do identificador cursos, então escrevemos nosso script da seguinte forma.

<script type="text/javascript">
$(function(){
$('table#curso tbody tr:even').css('background','#FFFF99');
});
</script>

Resultado:

tabela efeito zebra 2

Agora o que temos que fazer é praticamente a mesma coisa para as linhas ímpares, só trocamos o pseudosseletor para odd. Veja o script completo:

<script type="text/javascript">
$(function(){
//troca fundo de linhas pares
$('table#curso tbody tr:even').css('background','#FFFF99');
//troca fundo de linhas ímpares
$('table#curso tbody tr:odd').css('background','#FFFFCC');
});
</script>

Resultado final

tabela efeito zebra 3

Podemos também fazer o efeito zebra em colunas. Para isso basta alterar os elementos tr para td (coluna).

Isso vai interessar você também

• Paginação em listas HTML com jQuery Quick Pagination
• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Seletores jQuery – Parte I
• O que é Jquery?

]]>