[Tutorial] Carregamento ao clicar em categoria

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