Кнопка Лайк как рейтинг для сайта uCoz
 | |
| Оригинальная смена звездочек рейтинга на кнопку Лайк (Like) и дизайн. Где работает на javascript, что при клике сразу отображает. Это на стандартном нужно было выставить и потом сделать перезагрузку страницы и только после этого показаться число, в нашем случай здесь перезагрузка ненужна. Вы можете поставить как на новости или каталог блог, но здесь по умолчанию идет на файлы. По самой установке он не сложен, все делаем как описано, выбираем место, где должен отображаться, это в право или влево, кому как виднее. Этот скрипт безусловно многим знаком, вот решил переделать стилистику его и изменить полностью дизайн, но функциональность осталось, как была. Здесь еще зависит от тематического интернет ресурса, так как можно просто поставить сердечко, изображение идет под ссылку. Если вы раз оценили материал, то второй раз вам не получится сделать, при клике в правом углу покажется окно, что вы уже проголосовали. Сам дизайн от вам зависит, а это картинка, и цифры, в каким табло они будут установлены. Но и размер не нужно забывать, где-то нужно, чтоб он был небольшим, а вот на других, чтоб он был замечен, и ставят его вид материала и комментариев, под любой модуль. Так что вам можно поставить как он идет, или немного поработать стилями под гамму цвета, это круг, где выводиться рейтинг, в нашем случай цифры, и здесь только работает на плюс, если понравился материал, то клик делаем, если наоборот, то не чего, в минус функций здесь изначально не планировался. Рассмотрим как будет при установке:  Здесь вы можете сами поменять, к примеру так:  Приступаем к установке: Нужно зайти в админ панель и вся там будет происходить, это прописать в низ сайт 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 - на статьи В стилях стоят ссылки, что выводят изображение, при смени их не забываем под каждый элемент настраивать, если сделаете также по ширине и высоте, то не чего редактировать не нужно. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 15 | |
| |
| 1 2 » | |
