FAQ de perguntas e respostas com jquery

Olá, hoje vou mostrar um simples script de FAQ com jquery. Com ele você consegue adicionar a quantidade de perguntas necessárias ou até mesmo criar um MENU que ao clicar abre um submenu.

Exemplo

<div id="faq">
<ul id="faqs">
<li>
   <h2>Pergunta?</h2>
   <div class="answer">
    <p>    Resposta </p>
   </div>
</li>
<li>
   <h2>Pergunta?</h2>
   <div class="answer">
    <p> Resposta </p>
   </div>
</li>
</ul>
</div>

Para visualizar o exemplo, clique aqui.
Para fazer o download do arquivo, clique aqui.

Javascript

Galeria de fotos com jquery – Demo 1

Hoje vou mostrar uma galeria de fotos muito interessante que utiliza jquery.

Para visualizar o exemplo, clique aqui.
Para fazer o download do arquivo, clique aqui.

Instalação:

1. Incluir dois arquivos Javascript no cabeçalho de sua página:
<script type="text/javascript" src="jquery.js"></script> – Download
<script type="text/javascript" src="jquery.galleria.pack.js"></script> – Download

2. Incluir o CSS no cabeçalho de sua página:
<link rel="stylesheet" href="galeria.css" type="text/css" media="screen" /> – Download

3. Incluir o script no cabeçalho de sua página:

Código Javascript:

                // adiciona um título para a imagem ampliada
                image.attr(‘title’,'Próxima imagem >>’);
            },
            onThumb : function(thumb) {
                var _li = thumb.parents(‘li’);
                var _fadeTo = _li.is(‘.active’) ? ‘1′ : ‘0.3′;
                // efeito ao carregar os thumbs
                thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500);
                // efeito ao colocar o mouse em cima do thumb
                thumb.hover(
                    function() { thumb.fadeTo(‘fast’,1); },
                    function() { _li.not(‘.active’).children(‘img’).fadeTo(‘fast’,0.3); }
                )
            }
        });
    });
</script>

3. HTML

Código HTML:

Obs.: Você pode adicionar quantas fotos quiser. O script monta os thumbs sozinho, assim não é necessário criar uma imagem grande e uma miniatura.

Javascript

Validar formulário com Javascript

Bom pessoal, hoje vou mostrar como validar um formulário em Javascript. É algo bem simples e muito utilizado hoje em dia.
Esse tipo de validação serve para que o usuário preencha os campos obrigatórios ou até para verificar se o mesmo foi preenchido de maneira correta.

O primeiro passo é criar o formulário e os campos onde o usuário entrará com os dados. Não se esqueça de nomear os campos corretamente, pois é a partir deles que validamos cada um.

Formulário:

<form name=”formulario” method=”post” onSubmit=”return validaFrm(this);” action=”action_frm.php”>
<fieldset id=”fieldcontato”>
<legend>Formulário</legend>
<label for=”nome”>Nome:</label><br />
<input type=”text” name=”frm_nome” maxlength=”255″ /><br /><br />
<label for=”email”>E-mail:</label><br />
<input type=”text” name=”frm_email” maxlength=”255″ /><br /><br />
<label for=”mensagem”>Mensagem:</label><br />
<textarea name=”frm_mensagem” cols=”33″ rows=”4″></textarea><br /><br />
<input name=”botao” type=”submit” value=”enviar dados” />
</fieldset>
</form>

Repare que na declaração do formulário temos um OnSubmit. O mesmo serve para chamar a função Javascript responsável pela validação, caso todos os campos estejam preenchidos corretamente ele redireciona para o action, neste caso para a página “action_frm.php”.

Código Javascript:

Bom, o código Javascript é bem simples a finalidade dele é ir checando campo por campo. Caso um deles esteja vazio ou preenchido incorretamente ele exibe uma mensagem (alert) e volta para o formulário.

O código principal é esse:
if(frm.frm_nome.value==”){
alert(‘Preencha o nome.’);
frm.frm_nome.focus();
return(false);
};
Neste e caso ele está checando se o campo “frm_nome” é igual a vazio, caso seja ele exibe uma mensagem “Preencha o nome.” E retorna para o formulário e não executa a ação do formulário (action).

Clique aqui para fazer o download.

Javascript

Lightbox 2

Olá, vamos aprender hoje como utilizar o famoso script lightbox para ampliar as imagens.

Para quem não sabe o que é lightbox:
É um script que sobrepõe imagens á página corrente e não dentro da página. Isto faz com que as imagens não sejam limitadas por um layout. Exemplo é uma imagem que sai fora do layout por ter uma largura maior. A vantagem é que não precisar ser aberta em outra página ou popup ela é ampliada ali mesmo, com um clique para ampliar e um clique para “desampliar”.

Para visualizar o exemplo, clique aqui.
Para fazer o download do arquivo, clique aqui.

1º Passo – Instalação

1. Incluir três arquivos Javascript no cabeçalho de sua página:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Incluir o CSS no cabeçalho de sua página:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Verifique se as imagens do CSS estão com os caminhos corretos.

2º Passo – Ativação

1. Para ampliar uma imagem basta adicionar um rel = "lightbox" na tag do link que irá ampliar a imagem. Exemplo:
<a href="images/image-1.jpg" rel="lightbox" title="Legenda da imagem">ampliar</a>

2. Usar a tag “title” no link é opcional, ela serve como legenda da imagem.

3. Se você pretende agrupar algumas imagens como se fossem galerias basta adicionar rel="lightbox[nome_do_grupo]” na tag do link que irá ampliar cada imagem. Exemplo:
<a href="images/image-1.jpg" rel="lightbox[galeria]" title="Legenda 1">ampliar 1</a>
<a href="images/image-2.jpg" rel="lightbox[galeria]" title="Legenda 2">ampliar 2</a>
<a href="images/image-3.jpg" rel="lightbox[galeria]" title="Legenda 3">ampliar 3</a>
Esse exemplo é muito útil quando precisamos montar uma galeria com navegação “próxima” e “anterior”. Assim conseguimos ir navegando de imagem em imagem sem precisar fechar o lightbox.

4. Se pretende colocar uma imagem de loading, têm de especificar a sua localização no topo do script lightbox.js.

Esse tutorial é apenas uma tradução resumida do próprio site do criador do lightbox.

Javascript

Criando abas com Javascript

1º Passo:

Criamos duas classes no CSS (.menuAbas e .menuAbas-sel).

estrutura.css

.menuAbas { background-image: url(imagem/bot_canalofertas_off.gif); color: #798492; }

.menuAbas-sel {background-image: url(imagem/bot_canalofertas_on.gif); color: #ffffff; }

Feito isso, vamos criar os divs com as Abas, cada div com um ID diferente mas todos com a mesma classe. Cada div representará uma Aba no site. No onClick colocamos o nome do div da Aba e o nome do div correspondente ao conteúdo que aparecerá quando for clicado. Exemplo:

arquivo.html

<div id=”Aba_1″ onClick=”AlternarAbas(Aba _1′, divAba _1′)” > Primeira Aba </div>
<div id=”Aba_2″ onClick=” AlternarAbas(Aba _2′, divAba _2)” > Segunda Aba </div>

<div id=”divAba_1″ style=”display: none”> Conteúdo da primeira aba </div>
<div id=”divAba _2″ style=”display: none”> Conteúdo da segunda aba </div>

2º Passo:

Agora vamos criar o JavaScript

abas.js

//Função que utilizamos na hora de definir o array, para pegar o objeto

function stAba(menu,conteudo)

{

this.menu = menu;

this.conteudo = conteudo;

}

//Array com todos as abas

var arAbas = new Array();

arAbas[0] = new stAba(Aba _1′,’ divAba_1′);

arAbas[1] = new stAba(Aba _2′,’ divAba_2’);

//Função para fazer todas as abas desaparecerem e aparecer apenas a Aba selecionada
function AlternarAbas(menu,conteudo)

{

for (i=0;i<arAbas.length;i++)

{

document.getElementById(arAbas[i].menu).className = ‘menuAbas’;

document.getElementById(arAbas[i].conteudo).style.display = ‘none’;

}

document.getElementById(menu).className = ‘menuAbas-sel’;

document.getElementById(conteudo).style.display = ”;

}

</script>

Pronto, agora é só testar e implementar quantas abas precisar. Qualquer dúvida COMENTE.

FAQ de perguntas e respostas com jquery

Galeria de fotos com jquery – Demo 1

Validar formulário com Javascript

Lightbox 2

Criando abas com Javascript

Busca

Categorias

Arquivos

Tags

Lista de links