Botão "Pré-Visualizar Rápido" no post
Adicionar um botão na caixa de respostas pra pré-visualização dos tópicos rapidamente.
Atenção
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()
});
});
Aceda à:
Painel de Controle :seta: Módulos :seta: HTML & JavaScript :seta: Gestão dos Códigos JavaScript
Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Nos Tópicos.
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas JavaScript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.
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 :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Folha de estilo CSS
5º - Resultado final:
Desenvolvido por (© SH-Design & HenRyqUéè) | (http://shdesign.ativoforum.com/)
Editado e Postado por Kio © Staffer Group BR™
Editado e Postado por Kio © Staffer Group BR™