Mudar fundo de acordo com o ícone
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1 • Compartilhe
Mudar fundo de acordo com o ícone
Detalhes da questão
Endereço do fórum: http://brasilplayclassic.forumeiros.com
Versão do fórum: ModernBB
Descrição
Boas, tenho o seguinte código
- Código:
/*globals jQuery, FA*/
/**
* Alterar o ícone do tópico com AJAX.
*
* @author Luiz
* @version 1.2
* @licence MIT
*/
(function ($) {
'use strict';
var config = [
{ name: 'Resolvido', id : 4, background: '#8b5', onlyForMod: true },
{ name: 'Em Curso', id : 1, background: '#ebb537' },
{ name: 'Recusado', id : 1, background: '#FF0000', onlyForMod: true },
{ name: 'Importante', id: 5, background: '#e3493b', onlyForAdmin: true }
];
window.FA = window.FA || {};
FA.Topic = FA.Topic || {};
var MarkIcon;
FA.Topic.MarkIcon = MarkIcon = function (config) {
var self = this;
self.userConfig = config;
self.defaults = {
name: undefined,
id: undefined,
background: undefined,
onlyForMod: false,
onlyForAdmin: false
};
self.config = $.extend({}, self.defaults, self.userConfig);
$.each(self.config, function (key, value) {
if (key === undefined) {
throw new Error ('Não foi especificado um: ' + key + ' para o script de botões.');
}
if (value === undefined) {
throw new Error ('Não foi especificado um valor: ' + value + ' para o script de botões.');
}
});
};
MarkIcon.prototype.init = function () {
var self = this;
var $post = $('.post:first');
var $link = $post.find('a[href$="mode=editpost"]');
if (!$link.length) {
return false;
}
if (this.config.onlyForMod && (_userdata.user_level !== 1 && _userdata.user_level !== 2)) {
return false;
}
if (this.config.onlyForAdmin && _userdata.user_level !== 1) {
return false;
}
self.messageLink = $link.attr('href');
self.$button = $('<button>', {
'class' : 'fa-mark-icon-button',
'data-id': self.config.id,
'text' : self.config.name
});
self.$button
.css('background-color', self.config.background)
.on('click', function (event) {
event.preventDefault();
self.runAjax();
})
.insertBefore($post)
;
self.appendStyles();
};
MarkIcon.prototype.runAjax = function () {
var self = this;
self.changeText('<i class="fa fa-refresh fa-spin"></i> Marcando...');
$.get(self.messageLink)
.done(function (context) {
var $form = $('form[action="/post"]', context);
var encode = document.charset.toLowerCase() === 'utf-8' ? window.encodeURIComponent : window.escape;
var formData = $form.serializeArray();
var data = {};
$.each(formData, function () {
var obj = this;
data[obj.name] = obj.value;
});
data.post_icon = self.config.id;
data.post = 1;
var encoded = $.map(data, function (value, key) {
return key + '=' + encode(value);
}).join('&');
$.post(self.messageLink, encoded)
.done(self.changeText('<i class="fa fa-check"></i> Marcado!'))
.fail(self.error)
;
})
.fail(self.error)
;
};
MarkIcon.prototype.changeText = function (text) {
var self = this;
self.runAjax = function () {
return false;
};
self.$button
.html(text)
.prop('disabled', true)
;
};
MarkIcon.prototype.error = function () {
var self = this;
alert([
'Houve um erro ao marcar o tópico como "' + self.config.name + '".',
'Por favor, contate o suporte técnico.'
].join('\n'));
};
MarkIcon.prototype.appendStyles = function () {
$('<style>', {
'text': [
'.fa-mark-icon-button {',
' padding: 8px 8px 8px 8px;',
' border: none;',
' color: #fff;',
' margin: 10px 0 10px 6px;',
' box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.08);',
' border-radius: 3px;',
'}'
].join('\n')
}).appendTo('head');
};
$(function () {
$.each(config, function () {
var self = this;
(new FA.Topic.MarkIcon(self)).init();
});
});
}(jQuery));
alguém poderia ajudar ?
Re: Mudar fundo de acordo com o ícone
Olá @Victores,
Crie uma nova página JavaScript, com investimento em todas às páginas - com o seguinte código:
Cordialmente,
pedxz.
Crie uma nova página JavaScript, com investimento em todas às páginas - com o seguinte código:
- Código:
/**
* Change the topic background according to the icon.
*
* @author Luiz Felipe F.
* @see https://lffg.github.io
* @version 1.0.1
* @license MIT
*/
(function($) {
'use strict';
var config = [
{ url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
{ url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
{ url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
];
if (! /^(?:\/f\d+(?:p\d+|)-.*|\/search)$/i.test(location.pathname)) return false;
$(function() {
$('.dterm').each(function() {
var $this = $(this);
if (! $this.css('background-image')) return;
$.each(config, function(index, current) {
var regex = new RegExp (current.url, 'gi');
if (! regex.test($this.css('background-image'))) {
return;
}
/**
* Pintamos com o fundo desejado.
*/
$this
.parent()
.css('background-color', current.background)
;
});
});
});
})(jQuery);
- Código:
var config = [
{ url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
{ url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
{ url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
];
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7996
Pontos : 9259
Re: Mudar fundo de acordo com o ícone
@Pedxz Coloquei o código acima e sequer estão aparecendo dentro dos tópicos para seleção.
Re: Mudar fundo de acordo com o ícone
UP aqui pra alguém me ajudar
Re: Mudar fundo de acordo com o ícone
Olhe, o senhor primeiramente deve adicionar alguns ícones da mensagens para o código funcionar. Leia o seguinte tópico: [FAQ] Adicionar ícones nas mensagens , e após isso faça:
Pedxz escreveu:Olá @Victores,
Crie uma nova página JavaScript, com investimento em todas às páginas - com o seguinte código:A configuração é semelhante ao script apresentado em cima:
- Código:
/**
* Change the topic background according to the icon.
*
* @author Luiz Felipe F.
* @see https://lffg.github.io
* @version 1.0.1
* @license MIT
*/
(function($) {
'use strict';
var config = [
{ url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
{ url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
{ url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
];
if (! /^(?:\/f\d+(?:p\d+|)-.*|\/search)$/i.test(location.pathname)) return false;
$(function() {
$('.dterm').each(function() {
var $this = $(this);
if (! $this.css('background-image')) return;
$.each(config, function(index, current) {
var regex = new RegExp (current.url, 'gi');
if (! regex.test($this.css('background-image'))) {
return;
}
/**
* Pintamos com o fundo desejado.
*/
$this
.parent()
.css('background-color', current.background)
;
});
});
});
})(jQuery);na url, o senhor põe o endereço do ícone e em background a cor de fundo, como apresentado em cima.
- Código:
var config = [
{ url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
{ url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
{ url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
];
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7996
Pontos : 9259
Re: Mudar fundo de acordo com o ícone
Resolvido, pode fechar... Obrigado !
Re: Mudar fundo de acordo com o ícone
Questão resolvidaEsta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área. |
Tópicos semelhantes
» Mudar o fundo do tópico de acordo com o ícone
» Mudar background do tópico de acordo com o ícone
» Fundo dos tópicos de acordo com o ícone de mensagem
» Fundo seguindo de acordo com as palavras
» Variar imagem de fundo de acordo com os fóruns
» Mudar background do tópico de acordo com o ícone
» Fundo dos tópicos de acordo com o ícone de mensagem
» Fundo seguindo de acordo com as palavras
» Variar imagem de fundo de acordo com os fóruns
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos