Цифровой рейтинг материалов для uCoz
 | |
| Одна из важных функций цифровой рейтинг, что идет в плюс и минус, где все выставлено на кнопках с табло под разную цветовую гамму. Трудно сайт без него представить, ведь он оценивает труд веб мастера. Палитра как уже сказано у него разнообразная, если положительный клик, то высвечивается зеленая, по другую сторону красная производится. Но бывает кто не проголосовал, то по умолчанию останется ноль на сером полотне. Полностью сформирован и построен по конструкции на стилях, что самому можно будет потом редактировать под свою площадку. Изначально рассматривал на вид материалов и комментариев, сразу отлично работало и оставалось форме создать. Но хотелось его видеть на главной странице, что нужно перенести на основу, что получилось, куда не производил нажатие, он выставлял только отрицательно. Все же разрешил эту небольшую проблему и теперь этот скрипт здесь ниже увидите. Если вы решите поставить в основание статьи или мануал, то просто скачиваем текстовый документ с кодом. С проверочной, как визуально смотрится. 1.  2.  3.  4.  Установку происходит, так где считаете его наблюдать: Код <div style="width: 110px;"> <?if($RATE_FORM$)?> <a href="#" title="Минуснуть" onclick="rateForm(-1,$ID$,'load');return false"> <div class="photo_m"><i class="fa fa-thumbs-o-down" aria-hidden="true" style="font-size:19px;"></i></div></a><?else?> <a title="Вы не можете минусовать"> <div class="photo_m"><i class="fa fa-thumbs-o-down" aria-hidden="true" style="font-size:19px;"></i></div></a><?endif?> <?if($RATE_FORM$)?> <a href="#" title="Плюсануть" onclick="rateForm(+1,$ID$,'load');return false"> <div class="photo_p"><i class="fa fa-thumbs-o-up" aria-hidden="true" style="font-size:19px;"></i></div></a><?else?> <a title="Вы не можете плюсовать"> <div class="photo_p"><i class="fa fa-thumbs-o-up" aria-hidden="true" style="font-size:19px;"></i></div></a><?endif?> <?if($RATING$*$RATED$-2*$RATED$='0')?><div class="photo_null"><?endif?> <?if($RATING$*$RATED$-2*$RATED$>0)?><div class="photo_plus"><?endif?> <?if($RATING$*$RATED$-2*$RATED$<0)?><div class="photo_minus"><?endif?> <span title="Голосов: $RATED$" id="rate_$ID$"> <script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script> <script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Aabger/rate.js"></script> </span> </div> </div> CSS: Код .photo_m {text-shadow: #908585 1px 0px 3px;background-color: #38434D;border-width: 1px 0px 1px 1px;border-style: solid;border-color: #505f6d;color: #e4dddd;float: left;font-size: 19pt;height: 30px;width: 30px;text-align: center;line-height: 21px;vertical-align: middle;border-radius: 55px;border: 2px solid #a59c9c;background: #9a2114;} .photo_p {text-shadow: #1f1a1a 0px -6px 20px;background-color: #3e4d5a;border-width: 1px 1px 1px 0px;border-style: solid;border-color: #404c56;color: #f9f3f3;float: right;font-size: 17pt;height: 30px;width: 30px;text-align: center;line-height: 25px;vertical-align: middle;border-radius: 50px;border: 2px solid #a5a5a5;background: #0e7112;} .photo_null {background-color: #8a8a8a;border-width: 1px 1px 1px 1px;border-style: solid;border-color: #303B45;color: #f5f5f5;float: right;font-size: 17pt;height: 34px;width: 50px;text-align: center;line-height: 31px;vertical-align: middle;border-radius: 100px;border: 2px solid #bbb9b9;margin: -2px auto;text-shadow: 0 1px 0 #131111;} .photo_plus {background-color: #2c8e17;border-width: 1px 1px 1px 1px;border-style: solid;border-color: #303B45;color: #e4e4e4;float: right;font-size: 15pt;height: 34px;width: 50px;text-align: center;line-height: 31px;vertical-align: middle;border-radius: 100px;border: 2px solid #403b3b;margin: -2px auto;text-shadow: 0 1px 0 #353131;} .photo_minus {background-color: #ff0c0c;border-width: 1px 1px 1px 1px;border-style: solid;border-color: #303B45;color: #f1f1f1;float: right;font-size: 15pt;height: 34px;width: 50px;text-align: center;line-height: 28px;vertical-align: middle;border-radius: 100px;border: 2px solid #544a4a;margin: -2px auto;text-shadow: 0 1px 0 #716161;} .photo_p:hover {background: #065606;color: #f0fff0;} .photo_null:hover {background: #aaaaaa; color: #efefef;} .photo_minus:hover {background: #e00f0f;color: #f1ecec;} .photo_plus:hover {background: #288815;color: #f9f9f9;} .photo_m:hover {background: #880e07;color: #ffffff;} По правую сторону выстроить. Код <div style="float:right;margin: -4px 4px 1px 0;"> Здесь код </div> Название модуля (blog, load) в ID добавляем. Здесь подключены шрифтовые иконки, что красивые знаки воспроизводятся. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
