Mavrikii
Platinum Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Цитата:| Знать бы ещё как это сделать. |
руками, только ими. смайлики в формате svg, код обработки вот - разбирайтесь (все в нем не нужно)
Код: $(function () {
var a = !1;
$("body").on("click", ".article__userbar-emoji .emoji-item", function (c) {
c.preventDefault();
var b = $(this);
a || $.ajax({
url: "/services/article/add_emoji/",
data: {
article_id: GLOBAL.article.id,
emotion: b.data("type")
},
dataType: "json",
beforeSend: function () {
a = !0
}
}).done(function (a) {
if ("success" === a.status) {
var c = b.closest(".emoji").find(".emoji-item");
c.filter(".m-type-s1").find(".m-value").text(a.s1);
c.filter(".m-type-s2").find(".m-value").text(a.s2);
c.filter(".m-type-s3").find(".m-value").text(a.s3);
c.filter(".m-type-s4").find(".m-value").text(a.s4);
c.filter(".m-type-s5").find(".m-value").text(a.s5);
c.filter(".m-type-s6").find(".m-value").text(a.s6);
c.each(function () {
var a = $(this);
"0" === a.find(".m-value").text() ? a.removeClass("m-active") : a.addClass("m-active")
})
}
}).always(function () {
a = !1
})
});
}); |
сейчас гляну как подгружают
цветное заполнение идет через градиенты
Код: <svg class="emoji__gradients">
<defs>
<linearGradient id="emoji_s_1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#00B2FF;"></stop>
<stop offset="100%" style="stop-color:#006DEE;"></stop>
</linearGradient>
<linearGradient id="emoji_s_2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FED108;"></stop>
<stop offset="100%" style="stop-color:#F7AD00;"></stop>
</linearGradient>
<linearGradient id="emoji_s_3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#77E534;"></stop>
<stop offset="100%" style="stop-color:#44B839;"></stop>
</linearGradient>
<linearGradient id="emoji_s_4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8740BF;"></stop>
<stop offset="100%" style="stop-color:#5351A1;"></stop>
</linearGradient>
<linearGradient id="emoji_s_5" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FB852F;"></stop>
<stop offset="100%" style="stop-color:#F72F2F;"></stop>
</linearGradient>
<linearGradient id="emoji_s_6" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF0A0A;"></stop>
<stop offset="100%" style="stop-color:#C10909;"></stop>
</linearGradient>
</defs>
</svg> |
и обращение к ним в css
откуда берутся сами иконки пока не знаю, вижу лишь их конечный svg код в странице.
первая, к примеру
Код:| <svg viewBox="0 0 40 40" id="icon-like" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 20l4.064-6.489V7.987c0-.545.442-.987.987-.987A3.949 3.949 0 0 1 22 10.949V16h7a2 2 0 1 1 0 4 2 2 0 1 1 0 4h-1a2 2 0 1 1 0 4h-1a2 2 0 1 1 0 4H17a4 4 0 0 1-4-4v-8zm-1-.016V32H8V19.984h4z"></path></svg> |
грузятся из https://cdn22.img.ria.ru/i/sprites/icon/inline.svg?5
icon-like, icon-haha, icon-wow, icon-sad, icon-angry, icon-dislike |
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:00 10-09-2019 | Исправлено: Mavrikii, 21:35 10-09-2019 |
|
