» »

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


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

Оригинальная смена звездочек рейтинга на кнопку Лайк (Like) и дизайн. Где работает на javascript, что при клике сразу отображает. Это на стандартном нужно было выставить и потом сделать перезагрузку страницы и только после этого показаться число, в нашем случай здесь перезагрузка ненужна. Вы можете поставить как на новости или каталог блог, но здесь по умолчанию идет на файлы. По самой установке он не сложен, все делаем как описано, выбираем место, где должен отображаться, это в право или влево, кому как виднее.

Этот скрипт безусловно многим знаком, вот решил переделать стилистику его и изменить полностью дизайн, но функциональность осталось, как была. Здесь еще зависит от тематического интернет ресурса, так как можно просто поставить сердечко, изображение идет под ссылку. Если вы раз оценили материал, то второй раз вам не получится сделать, при клике в правом углу покажется окно, что вы уже проголосовали.

Сам дизайн от вам зависит, а это картинка, и цифры, в каким табло они будут установлены. Но и размер не нужно забывать, где-то нужно, чтоб он был небольшим, а вот на других, чтоб он был замечен, и ставят его вид материала и комментариев, под любой модуль. Так что вам можно поставить как он идет, или немного поработать стилями под гамму цвета, это круг, где выводиться рейтинг, в нашем случай цифры, и здесь только работает на плюс, если понравился материал, то клик делаем, если наоборот, то не чего, в минус функций здесь изначально не планировался.

Рассмотрим как будет при установке:

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

Здесь вы можете сами поменять, к примеру так:

Меняем рейтинг на кнопку Like

Приступаем к установке:

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

Код
<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)

Код
.likeplus {font-size:1pt;background:url('http://zornet.ru/Fresa/AB/fega/9955e0a66ace4b4fa4db5bb40a534f9e.png') top;width:20px;height:20px;overflow:hidden;cursor:pointer;margin-right:4px;margin-top:0px}  
.likeplus_hover {font-size:1pt;background:url('http://zornet.ru/Fresa/AB/fega/aeec1b20862e49d7b683dfea45abfcad.png') bottom;width:20px;height:20px;overflow:hidden;cursor:pointer;margin-right:4px;margin-top:0px}  
.like2 {font-size:11pt;font-weight:bold;color:#111C49;}  
.likex {font-size: 11pt;font-weight:bold;color:#223276;}
.rating-kp-imdb {padding: 1px;padding-left: 6px;padding-right: 6px;border-radius: 55px;background: #8FC8F0;}


Так где хотите видеть:

Код
<?if($RATING$)?>  
<div onclick="likePlus(1,$ID$,'load');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$"><span class="rating-kp-imdb" style="border: 2px solid #708BB3">$RATED$</span></div></td></tr></table>  
</div>  
<?endif?>

Теперь давайте разберем, что сменить в самом коде, чтоб поставить на другой модуль.

В этом прописан load - что будет работать на каталоге файлов.

Исли убрать его и поставить другие.

news - на новости
publ - на статьи

В стилях стоят ссылки, что выводят изображение, при смени их не забываем под каждый элемент настраивать, если сделаете также по ширине и высоте, то не чего редактировать не нужно.
29.04.2017 Просмотров: 392 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Brung
Brung 29.04.2017 21:131
0
Здесь полностью согласен, так как кнопка была здесь от фейсбука, это видать самая первая и точно ее можно было не заметить. Но кто делал, сразу стили для этого написал, но что оценка в обводе, это уже по другому видеться.
Kosten
Kosten 29.04.2017 21:172
0
Стили просто взял с персональной страницы, где также выводит, только плюсы и минусы, но дизайн пригодился и не стал его выводит под какой то цвет, просто показал, что можно так или по другому сделать.
FeStemBer
FeStemBer 29.04.2017 21:213
0
Сам его в свое время ставил, но кнопки там точно, нужно лупу брать и искать, здесь и кнопку и остальное видно, но главное, как понял, что можно и больше намного сделать и так же уменьшить и не чего не рисовать.
Kosten
Kosten 29.04.2017 21:345
0
Здесь придется фотошоп применить, нужно выставить ширину и длину, так как в стилях нет этой функция и она идет по умолчанию. Только она не вся картинка будет показываться и там в стилях высоту поставить аналогичную. И только после этого кнопка покажется вся и не будет дергаться при наведение клика, так как также нужно регулировать, но все делается просто, если кто решил изменить и не знает как, то пишите в комментариях.
Марковичь
Марковичь 29.04.2017 21:264
0
Если брать, который есть, а это не тот, что здесь расположен и сравнить, то формат где то близок будет, но дизайн здесь больше нравится.
Kosten
Kosten 30.04.2017 00:556
0
Так для этого стили идут, на обвод также стили прописаны, они самые последние.
Scheme
Scheme 30.04.2017 00:577
0
Интересный скрипт, как на PHP работает, только нужно было сделать, что когда прибавляешь, дизайн оставался, то он пропадает, и только перезагрузив он появляется.
avatar