[TUTORIAL] Definir ícone da mensagem na caixa de resposta rápida

Estamos vivendo em um mundo de velocidade! Então, porque não sermos rápidos e ligeiros em nossos fóruns? Com este tutorial nós estaremos lhe ensinando como colocar os ícones de mensagens nas respostas rápidas! Antes de tudo lembre-se que teu fórum deverá ter os ícones nas mensagens.
Se não tem, leia a [FAQ] Adicionar ícones de mensagens


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

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

2º - Código a ser usado:
O código que estaremos a usar para criar a função esta abaixo, e logo depois temos uma explicação de onde poderá fazer as mudanças desejadas:

Código:

$(function() {
      if (!_userdata.user_level || !document.getElementById('quick_reply')) return;
      $('#quick_reply').prepend('<dl style="text-align:center;margin:3px auto;width:60%;padding:3px 0;"><dt style="float:left;font-size:11px;margin-top:4px;"><label style="color:#1675BC;"></label></dt><dd id="iconlist"></dd></dl>');
    
      // default icon
      icon({
        name : 'Nenhum',
        id : 0
      });
    
      icon({
        name : 'Resolvido',
        id : 1,
        image : 'http://i45.servimg.com/u/f45/11/65/59/72/resolu11.png'
      });
    
    
    
      function icon(o) {
        $('#iconlist').append('<label><input name="post_icon" value="'+o.id+'" id="post_icon_'+o.id+'" type="radio">&nbsp;<span onclick="document.forms[\'post\'].post_icon_'+o.id+'.checked=true">'+(o.image ? '<img src="'+o.image+'" alt="'+o.name+'" title="'+o.name+'">' : o.name)+'</span></label>&nbsp;&nbsp;');
        $('.post h2.topic-title img').attr('src') == (o.image ? o.image : 'http://2img.net/i/fa/empty.gif') && (document.getElementById('post_icon_'+o.id).checked = true);
      }
    });

/* O nome do ícone, exemplos: Em curso, resolvido, bloqueado... */ name = Nome do ícone; /* Link referente a imagem relacionada o ícone */ image = Imagem do ícone; /* Qual a posição do ícone em etapas numéricas  */ id = Número do ícone;

Para adicionar mais ícones e só multiplicar e adicionar o número ao lado como no exemplo abaixo:

Código:

$(function() {
      if (!_userdata.user_level || !document.getElementById('quick_reply')) return;
      $('#quick_reply').prepend('<dl style="text-align:center;margin:3px auto;width:60%;padding:3px 0;"><dt style="float:left;font-size:11px;margin-top:4px;"><label style="color:#1675BC;"></label></dt><dd id="iconlist"></dd></dl>');
    
      // default icon
      icon({
        name : 'Nenhum',
        id : 0
      });
    
      icon({
        name : 'Resolvido',
        id : 1,
        image : 'http://i45.servimg.com/u/f45/11/65/59/72/resolu11.png'
      });
    
      icon({
        name : 'Em curso',
        id : 2,
        image : 'http://i45.servimg.com/u/f45/11/65/59/72/en_cou11.png'
      });
    
      icon({
        name : 'Concluído',
        id : 3,
        image : 'http://i86.servimg.com/u/f86/11/66/91/15/ok_16x10.gif'
      });
    
      icon({
        name : 'Admin',
        id : 4,
        image : 'http://i45.servimg.com/u/f45/12/05/75/97/semttu10.png'
      });
    
      icon({
        name : 'Errado',
        id : 5,
        image : 'http://i86.servimg.com/u/f86/11/66/91/15/cancel12.png'
      });
    
    
      function icon(o) {
        $('#iconlist').append('<label><input name="post_icon" value="'+o.id+'" id="post_icon_'+o.id+'" type="radio">&nbsp;<span onclick="document.forms[\'post\'].post_icon_'+o.id+'.checked=true">'+(o.image ? '<img src="'+o.image+'" alt="'+o.name+'" title="'+o.name+'">' : o.name)+'</span></label>&nbsp;&nbsp;');
        $('.post h2.topic-title img').attr('src') == (o.image ? o.image : 'http://2img.net/i/fa/empty.gif') && (document.getElementById('post_icon_'+o.id).checked = true);
      }
    });

3º - Ativando a opção no painel de controle:
Para que a função funcione, teremos que ainda ativar a função no painel administrativo:


Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Definir ícone do post na caixa de resposta rápida