[TUTORIAL] Botão atualizar para widgets de ultimos assuntos
Muitos já viram esse efeito aqui no forúm, pois bem hoje estarei expondo o code dele aqui
1º - Código JavaScript...
Aceda em: Novo JavaScript
Envestimento: Em todas as págianas
Procure por: POSIÇÃO_DO_WIDGET
e troque pela posição em que o widget ultimos assuntos está, por
exemplo aqui no forum ele está em primeiro lugar, então terei que
colocar o número 1.
Salve!
2º - Código CSS...
Aceda em: Folha de Estilo CSS
Salve!
Muitos já viram esse efeito aqui no forúm, pois bem hoje estarei expondo o code dele aqui
--> Tutoriais sobre Programação <--
[TUTORIAL] Botão atualizar para widgets de ultimos assuntos
[TUTORIAL] Botão atualizar para widgets de ultimos assuntos
1º - Código JavaScript...
Aceda em: Novo JavaScript
- Código:
jQuery(document).ready(function(){
numero = POSIÇÃO_DO_WIDGET;
pega = numero - 1;
jQuery('.module:eq('+pega+')').before('<center><div id="contatlua"><span id="atlua">Atualizar</span><br><img src="http://i.imgur.com/xIXxQPx.png"></div></center>');
jQuery('#right, #left').mouseleave(function(){
jQuery('#contatlua').fadeOut();
});
jQuery('#atlua').click(function(){
jQuery('#atlua').text('Atualizando...');
jQuery('.module:eq('+pega+') .main-content').html('<center><img width="90%" src="http://www.portal.fmu.br/Global/img/loading.gif"></center>');
jQuery.get('/forum', function(expiressf){
pegsrf = jQuery('.module:eq('+pega+') .main-content', expiressf).html();
jQuery('.module:eq('+pega+') .main-content').html(pegsrf);
jQuery('#atlua').text('Atualizado!');
jQuery('#right, #left').delay(700).mouseleave();
});
});
jQuery('#contatlua').hide();
jQuery('.module:eq'+pega+')').hover(function(){
jQuery('#atlua').text('Atualizar');
jQuery('#contatlua').fadeIn();
});
});
Envestimento: Em todas as págianas
Procure por: POSIÇÃO_DO_WIDGET
e troque pela posição em que o widget ultimos assuntos está, por
exemplo aqui no forum ele está em primeiro lugar, então terei que
colocar o número 1.
Salve!
2º - Código CSS...
Aceda em: Folha de Estilo CSS
- Código:
#atlua:hover{
background: #7FBDF0
}
#atlua{
z-index:999;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
position:relative;
cursor:pointer;
font-weight:bold;
border: 1px solid darkblue;
border-radius:6px;
background:#BAD9F2;
padding: 5px 10px;
}
Salve!
- Funcionalidade:
PUNBB.
- Resultado: