em Qua 16 Jan 2013, 1:29 pm | |
![]() | [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!
[TUTORIAL] Botão "Pré-Visualizar Rápido" no post
1º - Adicionando o código JavaScript...
Aceda em: Novo código JavaScript






- 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



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

- Funciona em quais versões?
Testado apenas em PHPBB3 e PUNBB, mas creio que resulta nas demais.
![]() | 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 |
Olá Convidado, bem vindo ao SP-Design Aconselhamos que fique atendo a esses detalhes. Faça seus pedidos na Área Design. Não pratique o Flood Não peça suporte por MP Pedidos de Códigos | ![]() |
por DiogoR., Dom 29 Mar 2015, 8:57 pm
por Admin, Dom 22 Mar 2015, 3:55 am
por fascicularia, Seg 10 Mar 2014, 8:55 pm
por fascicularia, Seg 10 Mar 2014, 8:35 pm
por TiagoDJ-7.0, Seg 03 Mar 2014, 3:21 pm
por Tenma Hiraga, Dom 12 Jan 2014, 2:49 pm
por TiagoDJ-7.0, Ter 31 Dez 2013, 5:50 pm
por Crowley, Ter 31 Dez 2013, 8:42 am
por TiagoDJ-7.0, Sex 27 Dez 2013, 9:33 pm
por Ghost, Sex 27 Dez 2013, 6:37 pm
por Crowley, Sex 27 Dez 2013, 12:53 pm
por Crowley, Sex 27 Dez 2013, 12:46 pm