Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

RMBR

avatar
Administrador

[Você precisa estar registrado e conectado para ver esta imagem.]

[TUTORIAL] Reproduzindo o efeito AJAX

Eae pessoal, hoje estou disponibilizando um code meu que imita o efeito AJAX, esse código é muito eficaz para aqueles foruns que usam bastantes anúncios sobre seus tópicos, entre outros. Espero que gostem ^^


[Você precisa estar registrado e conectado para ver esta imagem.]

CRÉDITOS


HenRyqUéè & RMBR
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Reproduzindo o efeito AJAX


- Adicionando o código...
Vá em:

Visualização [Você precisa estar registrado e conectado para ver esta imagem.] Página Inicial [Você precisa estar registrado e conectado para ver esta imagem.] Geral [Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] Mensagem na Página Inicial
E em Conteúdo da mensagem. : adicione o seguinte código:

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!


- 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!


- Resultado...
[Você precisa estar registrado e conectado para ver esta imagem.]
Lembrando que você pode alterar o estilo e o texto da sua preferência

  • Funciona em quais versões?
    Todas.




RMBR


[Você precisa estar registrado e conectado para ver 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

http://rmbr.forumeiros.com

[F]lames

avatar
Helper
Olá,

O resultado é sensacional, apenas no css poderia ser adicionar um Overflow para deixar invisíveis as barras scroll's.
Mesmo assim, o código é ótimo, bem elaborado e funcional.

Até mais.

RMBR

avatar
Administrador
ghfghgfh

http://rmbr.forumeiros.com

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum