Кнопка Like вместо рейтинга для uCoz

Кнопка Like вместо рейтинга для uCoz

522016-05-031440114Денис Абдуллин

Весьма интересный вариант рейтинга для uCoz. Кнопка Like будет отображаться вместо рейтинга звездочками на вашем сайте uCoz.

Вы можете заменить изображение с большим поднятым вверх пальцем на свое (например, на сердечко или звездочку, прицел или еще что-то в этом роде). При первом нажатии на Like цифра просто увеличится на счетчике, никаких всплывающих окон не появится, при повторном нажатии появится окно, в котором будет написано, что Вы уже оценивали этот материал, и число больше не увеличится.

Пример

В примере наглядно показана работа скрипта, но поскольку это только пример, число увеличивается при каждом нажатии и при обновлении не сохраняется.

 
140

Установка

Панель управления » Управление дизайном

Вставьте этот скрипт, например, в Нижнюю часть сайта. Главное, чтобы он использовался только один раз на странице:

Код
<script type="text/javascript">
likePlus = function (c, d, f, g) {
  if (typeof d == 'undefined' || typeof c == 'undefined' || (c != 1 && c != -1)) return false;
  c += 2;
  if (!f) f = location.pathname.match(/[^\\\/]+/i) + '';
  if (!f) return false;
  var h = $('#rate_' + d);
  g = $.extend({
  'before': function (a) {
  },
  'after-success': function (a, b) {
  document.getElementById('frs2' + d).innerText++
  a.html(b).addClass(b > 0 ? 'positiveRate' : (b == 0 ? 'nullRate' : 'negativeRate'));
  },
  'after-error': function (a) {
  try {eval(a)} catch (e) {}
  }
  }, g || {});
  g.before(h);
  $.post('/' + f + '/', {'a': '65', 'id': d, 'mark': c, 'mod': f, 'ajax': '2'}, function (a) {
  a = $('cmd:first', a).text();
  var b = a.match(/Рейтинг:\s*([\d.]+)\/(\d+)/i);
  if (!b) return g['after-error'](a);
  b = Math.round(b[1] * b[2]) - 2 * b[2];
  g['after-success'](h, b)
  })
}
function getClass(nameid, nameclass) {
  document.getElementById(nameid).className=nameclass
}
</script>

Следующий код вы можете вставить туда же, но можно все стили селекторов вставить в Таблицу стилей (CSS):

Код
<style type="text/css">
.likeplus {font-size:1pt;background:url('http://yraaa.ru/_pu/10/58127939.png') top;width:13px;height:12px;overflow:hidden;cursor:pointer;margin-right:4px;margin-top:0px}
.likeplus_hover {font-size:1pt;background:url('http://yraaa.ru/_pu/10/58127939.png') bottom;width:13px;height:12px;overflow:hidden;cursor:pointer;margin-right:4px;margin-top:0px}
.like2 {font-size:8pt;font-weight:bold;color:#111C49;}
.likex {font-size:8pt;font-weight:bold;color:#223276;}
</style>

Изображение http://yraaa.ru/_pu/10/58127939.png можно заменить на свое.

Вот код самой кнопки. Вставлять нужно в вид материалов нужного модуля или на страницу материала и комментариев к нему. Для каталога статей в коде ниже написано publ. Чтобы использовать код для новостей сайта, например, заменить publ на news.

Код
<?if($RATING$)?>
<div onclick="likePlus(1,$ID$,'publ');return false" style="cursor:pointer;height:16px;" onmouseover="getClass('hr2$ID$','likeplus_hover');getClass('frs2$ID$','like2')" onmouseout="getClass('hr2$ID$','likeplus');getClass('frs2$ID$','likex')">
<table cellspacing="0" cellpadding="0"><tr><td><div id="hr2$ID$" class="likeplus"> </div></td><td><div class="likex" id="frs2$ID$">$RATED$</div></td></tr></table>
</div>
<?endif?>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (14)
Roma Morgunov 2015-07-20 в 17:59 / МатериалСпам
Спасибо!
1
Кирилл 2013-11-10 в 02:08 / МатериалСпам
сделать бы дизлайк еще
1
Кирилл 2013-11-10 в 02:08 / МатериалСпам
а так круто
1
Сергей Гатеев 2013-08-27 в 10:07 / МатериалСпам
Спасибо, работает
0
Ivahcenko Vladislav 2012-08-14 в 18:11 / МатериалСпам
и на ИО работает))
3
Ivahcenko Vladislav 2012-08-14 в 18:08 / МатериалСпам
через оперу работает) щас експлорер посмотрим
2
David 2012-07-16 в 09:50 / МатериалСпам
Подделать чуть под себя и все отлично)
3
Гость 2012-01-03 в 19:55 / МатериалСпам
)) thanks
4
Daim 2012-01-03 в 13:05 / МатериалСпам
Спасибо
1
Дамир Гаянов 2012-01-03 в 13:05 / Материал
спасибо большое!
2
Сергей 2016-05-09 в 21:05 / МатериалСпам
В фотоальбоме будет работать?
0
Purici Ion 2016-07-11 в 00:15 / МатериалСпам
а можно как то отключить ajax окно которое вылетает после оценки ?
0
Влад Логвиненко 2017-03-19 в 00:01 / МатериалСпам
слетел диз к чертям
0
Администратор 2018-12-15 в 07:25 / МатериалСпам
А как сделать чтобы при клике на кнопку ставилась оценка 5, а не 3?! И как реализовать ajax окно с успешной оценкой после первого нажатия?!
2
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.