-Bart-
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Botão "Pré-Visualizar Rápido" no post
Adicionar um botão na caixa de respostas pra pré-visualização dos tópicos rapidamente.
O código não funciona com BBCode só com HTML.
--> Tutoriais, dicas e astúcias <--
Botão "Pré-Visualizar Rápido" no post
Botão "Pré-Visualizar Rápido" no post
1º - Código a ser utilizado:
- 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º - Aplicação do tutorial:
Aceda à:
Painel de Controle > Módulos HTML & JAVASCRIPT > Gestão dos Códigos JavaScript
3º - Código CSS a ser utilizado:
- 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;
}
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS
5º - Resultado final:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]