Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Arquivos » Lixeira

#1
 Gmtp

avatar
Membro
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

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  :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;
}
4º - Aplicando o código CSS:
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™
Ver perfil do usuário

#2
 Stark'

avatar
Membro
Bacana '-'
Ver perfil do usuário

#3
 D'Leandro™

avatar
Fundador
Otimo, mas kd os creditos?
Ver perfil do usuário

#4
 Gmtp

avatar
Membro
Olá

Créditos adicionado, mais alguma coisa?

Até mais
Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
Os creditos sao de © SH-Design & HenRyqUéè
Ver perfil do usuário

#6
 Gmtp

avatar
Membro
Olá

Pronto, Mais alguma coisa?

Até mais
Ver perfil do usuário

#7
 D'Leandro™

avatar
Fundador
Tutorial Aceito;
Este tutorial foi aceito e movido para a área correspondente!
Ver perfil do usuário

#8
 fojogo

avatar
Membro
Otimo está de parabens
Ver perfil do usuário

#9
 D'Leandro™

avatar
Fundador
Bloqueado!
Movido para Lixeira! ( Motivo: Não é funcional com a nova versão forumeiros. )
Ver perfil do usuário

#10
 Conteúdo patrocinado