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 » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 [F]lames

avatar
Membro


[TUTORIAL] Botão para Alertas Moderativos

Bem vindo, neste tutorial, o senhor irá aprender a criar um botão nas respostas rápidas que, ao ser clicados, lhes apareça uma selectbox pedindo o código da moderação que irá ser utilizada, pré-visualizações no final do tópico.


--> Tutoriais, dicas e astúcias <--
Botão para Alertas Moderativos



- Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

(clique na imagem para poder visualizá-la melhor)

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. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
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.


- Código JavaScript:
Abaixo, você deverá editar alguns pontos do código Javascript:

Código:
$(document).ready(function() {
  $('form#quick_reply[action="/post"]').prepend('<div id="alertas-visu" style="text-align: center;"><select onchange="$(\'#alertas-visu #pre-alert\').html($(this).find(\'option:selected\').attr(\'value\')).fadeIn();$(\'#alert-ok\').fadeIn();" id="sel-alert" style="font-family: Century Gothic!important;-webkit-appearance: none; -webkit-padding-end: 20px; -webkit-padding-start: 6px;background: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);background-position: right center;background-repeat: no-repeat;border: 1px solid rgba(0, 0, 0, 0.25)!important;border-radius: 2px!important;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);color: #444;margin: 0 1px 0 0;text-shadow: 0 1px 0 rgb(240, 240, 240);padding: 6px!important;width: 506px;margin-bottom: 25px;display: none;"><option value="">Selecione um Alerta</option><optgroup label="GRUPO DE ALERTAS">
<option value="HTML DO ALERTA">NOME DO ALERTA</option>
</optgroup><optgroup label="GRUPO DE ALERTAS">
<option value="HTML DO ALERTA">NOME DO ALERTA</option>
</optgroup><optgroup label="GRUPO DE ALERTAS">
<option value="HTML DO ALERTA">NOME DO ALERTA</option>
</optgroup></select><div style="margin-bottom: 30px;display: none;" id="pre-alert"></div><input type="button" id="alert-ok" value="OK" onclick="$(\'#text_editor_textarea\').val($(\'#sel-alert\').find(\'option:selected\').attr(\'value\'));" style="font-family: \'Century Gothic\' !important; -webkit-appearance: none; -webkit-padding-end: 20px; -webkit-padding-start: 6px; background-image: -webkit-linear-gradient(top, rgb(237, 237, 237), rgb(237, 237, 237) 38%, rgb(222, 222, 222))!important; border: 1px solid rgba(0, 0, 0, 0.247059) !important; border-top-left-radius: 2px !important; border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important; border-bottom-left-radius: 2px !important; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 1px 0px, rgba(255, 255, 255, 0.74902) 0px 1px 2px inset; color: rgb(68, 68, 68)!important; margin: 0px 1px 25px 0px; text-shadow: rgb(240, 240, 240) 0px 1px 0px; padding: 6px !important; font-size: 13px!important; text-align: center!important; font-weight: lighter !important;width: 130px;display: none;"></div>');
  $('#text_editor_controls .left-box #text_edit button:last').after('  <button class="button2" id="alert-flames" onClick="$(\'#sel-alert\').fadeToggle();return false;"><img src="http://i71.servimg.com/u/f71/17/71/75/73/ajuda110.png" title="Alertas de Moderação"></button>');
});
GRUPO DE ALERTAS Correspondente á um nome de grupo de alertas, por exemplo, Tutoriais/Tópicos.
HTML DO ALERTA - Local destinado á receber o HTML de cada alerta.
Atenção! Normalmente, o código HTML conterá aspas duplas ("), substitua-as por uma barra invertida seguida de uma aspa simples (\').
NOME DO ALERTA Local destinado á receber o nome do alerta que o HTML foi colocado em value.


- Resultado:
Finalmente, chegamos á pré-visualização de nosso efeito:

Visualizando (Botão com figura de homem, ao lado do botão OUTROS):
Ao clicar no botão:
Ao clicar na selectbox:
Ao selecionar o alerta:
Ao clicar no botão OK:



- Perguntas:

  • Funciona para quais versões ?
    O código acima se usado certamente, funciona em todas as versões.

  • Quantas opções posso adicionar ?
    Quantas opções o senhor desejar.

  • Oque acontece ao selecionar o alerta ?
    Abaixo da selectbox, aparece a pré-visualização do alerta, e ao clicar no botão OK o código é enviado á caixa de texto.



© SGBR™ & [F]lames & D'Leandro™


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[DÚVIDA] Botão para alertas moderativos
Ver perfil do usuário

#2
 D'Leandro™

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

#3
 'Fusion

avatar
Membro
Cara você é um nerd gostei muito obrigado por compartilhar esse belo código conosco esta de parabéns manow

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#4
 Stark'

avatar
Membro
Achei oq Eu Queria .-.
Ver perfil do usuário

#5
 eusouogoku

avatar
Membro
Cara adorei, servira muito para meu forum de RPG
Ver perfil do usuário

#6
 Conteúdo patrocinado