1![[TUTORIAL] Botão "Pré-Visualizar Rápido" no post Empty](https://2img.net/i/empty.gif)
[TUTORIAL] Botão "Pré-Visualizar Rápido" no post 16/01/13, 03:29 pm
RMBR
Administrador
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Botão "Pré-Visualizar Rápido" no post |
Olá pessoal, o efeito do código deste tutorial é adicionar um botão na caixa de respostas pra pré-visualização dos tópicos rapidamente. OBSERVAÇÃO: O CÓDIGO NÃO FUNCIONA COM BBCODE, SÓ COM HTML!
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botão "Pré-Visualizar Rápido" no post
[TUTORIAL] Botão "Pré-Visualizar Rápido" no post
1º - Adicionando o código JavaScript...
Aceda em: Novo código JavaScript
Módulos [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] HTML e JavaScript [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Gestão dos Códigos JavaScript [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Novo código JavaScript
Título: Coloque qualquer tpitulo;[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Envestimento: Marque "Nos Tópicos";
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Código JavaScript: Cole o seguinte código:
- Código:
$(document).ready(function(){
var cont = $("#text_editor_textarea").val();
$("input.button2[value='Enviar']").after('<input style="margin-left:4px" type="button" id="p-r" class="button2" value="Pré-Visualizar Rápido">');
$("input.button2[value='Pré-Visualizar Rápido']").after('<p><p><br><center><div id="pre" style=""><pre style="text-align:left;font-size:14px" id="cttr"></pre></div></center>');
$("#text_editor_textarea").keydown(function(){
var cont = $("#text_editor_textarea").val();
$("#cttr").html(cont);
}).keyup(function(){
var cont = $("#text_editor_textarea").val();
$("#cttr").html(cont);
});
$("#cttr").html(cont);
$("#pre").hide();
$("#p-r").click(function(){
$("#pre").slideToggle()
});
});
2º - Adicionano o código CSS...
Aceda em: Folha de Estilo CSS
Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Imagens e Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Folha de Estilo CSS
- Código:
#pre{
padding:10px;
border-radius:6px;
background: rgb(229,230,150);
background: -moz-linear-gradient(top, rgba(229,230,150,1) 0%, rgba(209,211,96,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,230,150,1)), color-stop(100%,rgba(209,211,96,1)));
background: -webkit-linear-gradient(top, rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
background: -o-linear-gradient(top, rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
background: -ms-linear-gradient(top, rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
background: linear-gradient(to bottom, rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 );
border:3px solid #D19D36;
width:auto;
}
3º - Resultado...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- Funciona em quais versões?
Testado apenas em PHPBB3 e PUNBB, mas creio que resulta nas demais.
© RMBR & SPDESIGN
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [TUTORIAL] Botão "Pré-Visualizar Rápido" no post |
Destaque do Fórum