[Tutorial] Carregamento ao clicar em categoria

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 12d 56m 43s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Seg Out 03, 2016 11:45 pm

Autor: Daemon
Funcionalidade: Todas as versões

Neste tutorial iremos ensina-los a adicionar uma mensagem de carregamento ao clicar em links da categoria.

Vamos primeiro aceder em Painel de controle :seta: Visualização :seta: Imagens e Cores :seta: Cores :seta: Folha de estilo CSS
PunBB
Código:
.pun table.table tr {cursor: pointer;}
.pun table.table tr.loading:after {
content: "Carregando...";
position: absolute;
left: 40%;
line-height: 30px;
width: 100px;
margin-left: -50px;
margin-top: 14px;
background: #555;
background: rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
-moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
text-align: center;
color: #fff;
text-shadow: rgba(0,0,0,0.2) 0px 1px 1px;
z-index: 10;
pointer-events: none;
}

PhpBB3
Código:
.topiclist li.row {cursor: pointer;}
.topiclist li.row.loading:after {
content: "Carregando...";
position: absolute;
margin-top: -30px;
left: 40%;
line-height: 30px;
width: 100px;
margin-left: -50px;
background: #555;
background: rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
-moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
text-align: center;
color: #fff;
text-shadow: rgba(0,0,0,0.2) 0px 1px 1px;
z-index: 10;
pointer-events: none;
}

PhpBB2
Código:
.forumline tr {cursor: pointer;}
.forumline tr.loading:after {
content: "Carregando...";
position: absolute;
left: 40%;
line-height: 30px;
width: 100px;
margin-left: -50px;
background: #555;
background: rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
-moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
text-align: center;
color: #fff;
text-shadow: rgba(0,0,0,0.2) 0px 1px 1px;
z-index: 10;
pointer-events: none;
}

Invision
Código:
.borderwrap tr {cursor: pointer;}
.borderwrap tr.loading:after {
content: "Carregando...";
position: absolute;
left: 40%;
line-height: 30px;
width: 100px;
margin-left: -50px;
background: #555;
background: rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
-moz-box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
box-shadow: inset rgba(0,0,0,0.3) 0px 1px 2px;
text-align: center;
color: #fff;
text-shadow: rgba(0,0,0,0.2) 0px 1px 1px;
z-index: 10;
pointer-events: none;
}

Depois iremos até Módulos :seta: HTML & JAVASCRIPT :seta: Gestão dos Códigos JavaScript
PunBB
Código:
$(document).ready(function() {
 $('.pun table.table tr').each(function(){
 var sURL = $(this).find("td.tcl h3 a").attr("href");
 $(this).click(function(){
 window.location = sURL;
 $(this).addClass("loading");
 })
 });
});

PhpBB3
Código:
$(document).ready(function() {
 $('.topiclist li').each(function(){
 var sURL = $(this).find(".dterm h3 a").attr("href");
 $(this).click(function(){
 window.location = sURL;
 $(this).addClass("loading");
 })
 });
});

PhpBB2
Código:
$(document).ready(function() {
 $('.forumline tr').each(function(){
 var sURL = $(this).find("h3 a").attr("href");
 $(this).click(function(){
 window.location = sURL;
 $(this).addClass("loading");
 })
 });
});

Invision
Código:
$(document).ready(function() {
 $('.borderwrap tr').each(function(){
 var sURL = $(this).find("h3 a").attr("href");
 $(this).click(function(){
 window.location = sURL;
 $(this).addClass("loading");
 })
 });
});
Salve...


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

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