Feliz ano novo para você!
Área Vip, os códigos mais inovadores
Leia as Regras do SP-Design
Publique no SPublicidade
Modifique o visual do seu fórum
Faça Pedidos Gráficos para seu fórum
Novo Administrador na comunidade
HenRyqUéè
Mensagens : 1520 Reputação : 429
Inscrição : 23/08/2012 Localização : Brasil
Cash : 29
Inscrição : 23/08/2012 Localização : Brasil
Cash : 29 Qui 14 Fev 2013, 10:48 am | |
![[TUTORIAL] Botão atualizar para widgets de ultimos assuntos Empty](https://2img.net/i/empty.gif)
![[TUTORIAL] Botão atualizar para widgets de ultimos assuntos Alerte10](https://i.servimg.com/u/f66/15/86/37/09/alerte10.png) | [TUTORIAL] Botão atualizar para widgets de ultimos assuntos |
O efeito do código é adicionar um botão acima do widget ultimos assuntos para atualiza-lo sem dar 'refresh' na página.
--> 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:
- 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:first').hover(function(){
jQuery('#atlua').text('Atualizar');
jQuery('#contatlua').fadeIn();
});
});
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:
- 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;
}
- Funcionalidade:
PUNBB.
- Resultado:
![[TUTORIAL] Botão atualizar para widgets de ultimos assuntos 2PJcsLK](https://i.imgur.com/2PJcsLK.png)
© SH-Design & SP-Design
![[TUTORIAL] Botão atualizar para widgets de ultimos assuntos Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Botão atualizar para widgets de ultimos assuntos |
Destaque do Fórum
Muito Obrigado
