Carregamento ao clicar em categoria

Nome do Arquivo: Carregamento ao clicar em categoria
Autor: Daemon
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins

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

Vamos primeiro aceder em Painel de controle Visualização Imagens e Cores Cores 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 HTML & JAVASCRIPT 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...


Se gostou do tutorial repute, não custa moedas hihi ^^...


Se tiver alguma dúvida em relação a este tutorial crie um tópico de mesmo nome.

Olá,

Epico :3 Repu

Muito bom Reputado.

Epic...+1

Show, Parabéns!

Nossa parabéns daemon Lindoso

Muito bom!
Reputado.

mais o javascript é em todas as paginas?

Muito Bom :: REP ::

Da um efeito mais elegante
é bem massa irei usar