[TUTORIAL] Definir ícone da mensagem na caixa de resposta rápida
Página 1 de 1 • Compartilhe
[TUTORIAL] Definir ícone da mensagem na caixa de resposta rápida
Definir ícone do post 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
--> Tutoriais, dicas e astúcias <--
Definir ícone do post na caixa de resposta rápida
Definir ícone do post na caixa de resposta rápida
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.
Painel de controle Modulos HTML & JavaScript "Aba" Gestão dos códigos JavaScripts |
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. |
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"> <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> ');
$('.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"> <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> ');
$('.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:
Painel de controle Geral Mensagens e E-mails Configuração |
Resultado:
© Fórum dos Fóruns
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 |
Tópicos semelhantes
» Caixa de mensagem e resposta rapida
» [TUTORIAL] Mensagens de aviso na caixa de resposta rápida
» Definir icone de mensagem padrão
» Caixa de resposta rápida
» Caixa de Resposta Rápida.
» [TUTORIAL] Mensagens de aviso na caixa de resposta rápida
» Definir icone de mensagem padrão
» Caixa de resposta rápida
» Caixa de Resposta Rápida.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos