1 [TUTORIAL] Reproduzindo o efeito AJAX 29/12/12, 03:52 pm
RMBR
Administrador
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Reproduzindo o efeito AJAX |
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] |
|
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Reproduzindo o efeito AJAX
[TUTORIAL] Reproduzindo o efeito AJAX
1º - Adicionando o código...
Vá em:
E em Conteúdo da mensagem. : adicione o seguinte código:Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Página Inicial [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Geral [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Mensagem na Página Inicial
- CLIQUE AQUI PARA VER O CONTEÚDO DESSE SPOILER:
- Código:
<script>
jQuery(document).ready(function(){
jQuery("#ajax-menu #ajax-msg div:eq(1)").hide();
jQuery("#ajax-menu #ajax-msg div:eq(2)").hide();
jQuery("#ajax-menu #ajax-msg div:eq(3)").hide();
jQuery("#ajax-menu #ajax-msg div:eq(4)").hide();
jQuery("#ajax-menu span:eq(0)").click(function(){
jQuery("#ajax-menu #ajax-msg div:eq(1)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(2)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(3)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(4)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(0)").show(1000);
});
jQuery("#ajax-menu span:eq(1)").click(function(){
jQuery("#ajax-menu #ajax-msg div:eq(0)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(2)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(3)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(4)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(1)").show(1000);
});
jQuery("#ajax-menu span:eq(2)").click(function(){
jQuery("#ajax-menu #ajax-msg div:eq(1)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(0)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(3)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(4)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(2)").show(1000);
});
jQuery("#ajax-menu span:eq(3)").click(function(){
jQuery("#ajax-menu #ajax-msg div:eq(1)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(2)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(0)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(4)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(3)").show(1000);
});
jQuery("#ajax-menu span:eq(4)").click(function(){
jQuery("#ajax-menu #ajax-msg div:eq(1)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(2)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(3)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(0)").hide(500);
jQuery("#ajax-menu #ajax-msg div:eq(4)").show(1000);
});
});
</script>
<style>
#ajax-menu{
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
}
#ajax-menu #ajax-msg{
overflow:scroll;
min-width:400px;
max-width:400px;
min-height:75px;
max-height:85px;
background: rgb(255,253,231); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,253,231,1) 0%, rgba(218,219,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,253,231,1)), color-stop(100%,rgba(218,219,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,253,231,1) 0%,rgba(218,219,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,253,231,1) 0%,rgba(218,219,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,253,231,1) 0%,rgba(218,219,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,253,231,1) 0%,rgba(218,219,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffde7', endColorstr='#dadbbf',GradientType=0 ); /* IE6-9 */
border:2px solid #D6D4AE;
padding:8px;
border-radius:4px;
}
#ajax-menu span{
font-weight:bold;
background: rgb(246,248,249);
background: -moz-linear-gradient(-45deg, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(135deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 );
transition: all 0.5s;
padding:5px;
margin-right:6px;
cursor:pointer;
color:#919191;
border:2px solid #D4D4D4;
border-radius:4px;
}#ajax-menu span:hover{background: rgb(246,248,249);
background: -moz-linear-gradient(45deg, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 );
transition:all 0.5s;
}
</style><div id="ajax-menu">
<span>ABA 1</span>
<span>ABA 2</span>
<span>ABA 3</span>
<span>ABA 4</span>
<span>ABA 5</span><br style="margin-bottom:10px"><div id="ajax-msg"><div>ESSE É O CONTEÚDO DA ABA 1</div><div>ESSE É O CONTEÚDO DA ABA 2</div><div>ESSE É O CONTEÚDO DA ABA 3</div><div>ESSE É O CONTEÚDO DA ABA 4</div><div>ESSE É O CONTEÚDO DA ABA 5</div>
</div><b>Criado por: HenRyqUéè - SPDesign</b>
</div><p>
<br><br>
Salve!
2º - Modificando o texto das abas e do conteúdo da msg...
Para alterar o texto das ABAS...
Aperte CTRL+F no seu brownser e localize os seguintes textos:
>> ABA 1
>> ABA 2
>> ABA 3
>> ABA 4
>> ABA 5
Depois é só altera-los para o da sua preferência.
Para alterar o texto dos CONTEÚDOS...
Aperte CTRL+F no seu brownser e localize os seguintes textos:
>> ESSE É O CONTEÚDO DA ABA 1
>> ESSE É O CONTEÚDO DA ABA 2
>> ESSE É O CONTEÚDO DA ABA 3
>> ESSE É O CONTEÚDO DA ABA 4
>> ESSE É O CONTEÚDO DA ABA 5
Depois é só altera-los para o da sua preferência.
Salve!
3º - Resultado...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Lembrando que você pode alterar o estilo e o texto da sua preferência
Lembrando que você pode alterar o estilo e o texto da sua preferência
- Funciona em quais versões?
Todas.
RMBR
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [DÚVIDA] Reproduzindo o efeito AJAX |