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.

Sistemas, Websites

Antonio & Mario

O que foi desenvolvido:
- Sistema para gerenciamento de conteúdo
- Galeria com efeito de rolagem
- Estrutura em tableless

Tecnologias utilizadas:
- PHP
- MYSQL
- CSS
- XML
- Javascript (jquery)

Parceria:
- Agência Jota3w

URL:
amc.arq.br

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

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

Antonio & Mario

Galeria de fotos com jquery – Demo 1

Criando abas com Javascript

Busca

Categorias

Arquivos

Tags

Lista de links